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内 容 简 介 


JavaScript 是 一 种 最 初 由 Netscape 的 LiveScript 发 展 而 来 的 面向 对 象 的 Web 脚本 语言 ， 被 ECMA 国 
际 定义 为 国际 化 标准 一 一 ECMAScript。JavaScript 具有 使 用 局 限 性 。 在 Web 方面 ， 其 必须 与 各 种 DOM 技 
术 结合 才能 发 挥 作用 。 因 此 ， 一 些 具有 开拓 创新 精神 的 开发 者 们 便 开 发 出 了 各 种 丰富 的 第 三 方 框架 ， 通 
过 第 三 方 的 支持 代码 实现 浏览 器 兼容 性 的 统一 、 代 码 的 简化 以 及 功能 的 增强 。 

本 书 作者 便 是 在 此 背景 下 ， 以 国外 最 优秀 的 JavaScript 框架 之 一 Yahoo User Interface Library ( 简 
称 YUI) 的 最 新 版 本 YUI 3.15 为 基础 编写 而 成 。 本 书 通过 通俗 易 懂 的 语言 和 大 量 丰 富 的 实例 ， 帮 助 读者 
解决 实际 生产 环境 中 的 各 种 问题 。 

本 书 适用 于 YUI 工程 师 ， 也 可 以 作为 教材 供 高 校 师 生 学 习 使 用 。 
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了 中 


前 


JavaScript 是 一 种 基于 原型 继承 的 、 面 向 对 象 的 动态 Web 脚本 语言 ， 其 被 广泛 应 用 于 
多 种 Web 平台 ， 是 目前 最 流行 的 Web 前 端 编程 语言 ， 也 是 Web 标准 化 的 三 罗马 车 一 一 结 
构 标 准 化 “XHTML 1.0)、 表 现 标准 化 〈CSS 2.1) 以 及 行为 标准 化 (ECMAScript) 中 
ECMAScript 的 具体 化 形式 。 使 用 JavaScript， 开 发 者 可 以 编写 功能 强大 的 脚本 。 在 当下 以 
用 户 体验 为 核心 的 开发 大 环境 下 ，JavaScript 具有 重要 的 作用 。 但 是 作为 一 种 弱 类 型 、 无 具 
体 对 象 操作 功能 的 脚本 语言 ,JavaScript 也 具有 先天 的 不 足 , 其 必须 借助 其 他 的 对 象 模型 ( 例 
如 XHTML DOM、HTML DOM 或 XML DOM) 来 操作 各 种 Web 元 素 ,因此 在 使 用 JavaScript 
时 ， 必 须 考虑 各 种 Web 浏览 器 对 JavaScript 本 身 的 解析 ， 以 及 对 DOM 的 表现 方式 。 这 也 
是 JavaScript 难于 使 用 的 根本 原因 。 

基于 以 上 原因 ， 众 多 具有 开拓 创新 精神 的 JavaScript 开发 者 们 编写 了 各 种 各 样 的 第 三 
方 JavaScript 框架 。 这 些 框架 的 共同 点 就 是 通过 插件 的 方式 ， 为 普通 开发 者 提供 简化 的 语 
法 以 及 具有 良好 封装 的 接口 ， 供 普通 开发 者 快速 调用 预 置 的 模块 ， 提 高 开发 效率 ， 降 低 兼 
容 性 BUG 产生 的 几率 。 

目前 ， 常 见 的 JavaScript 第 三 方 框架 包括 大 名 易 易 的 JQuery、Prototype、ExtJS、Dojo 
和 YUI 等 。 这 些 第 三 方 框架 各 有 各 的 侧重 点 : JQuery 注重 简洁 和 高 效 ， 但 在 功能 上 相 比 一 
些 老 的 框架 尚 有 不 足 ， Prototype 注重 代码 的 优雅 ， 基 于 底层 ， 易 学 易 用 ， 体 积 精简 ， 但 功 
能 较 弱 ，Ext JS 的 特点 是 高 性 能 ， 具 有 可 定制 的 Web UI 控件 库 、 丰 富 的 文档 和 可 扩展 的 组 
件 模型 ， 但 学 习 难 度 较 大 ;Dojo 是 目前 功能 最 强大 的 JavaScript 框架 ， 具 有 强大 的 界面 和 
特效 封装 ， 但 使 用 较 难 ， 语 法 增强 方面 较 弱 。 

相 比 而 言 ，YUI 以 DOM 脚本 来 简化 Web 开发 ， 并 提供 大 量 高 交互 性 的 可 视 化 元 素 ， 
同时 学 习 难 度 较 Ext JS 和 Dojo 等 较 小 。 总 体 而 言 ，YUI 是 一 种 极其 优秀 的 第 三 方 框架 。 
由 于 其 有 Yahoo 的 开发 团队 维护 ， 因 此 在 版 本 更 新 维护 方面 也 比较 稳定 ， 不 断 地 推出 新 版 
本 ， 由 此 产生 了 诸多 的 拥 在 。 

本 书 将 以 YUI 3.15 版 本 的 框架 为 基础 ， 通 过 通俗 易 懂 的 语言 和 大 量 丰 富 的 实例 ， 帮 助 
读者 解决 实际 生产 环境 中 的 各 种 问题 ， 提 高 Web 前 端的 开发 效率 。 


1. 目标 读者 


本 书 作 为 一 款 YUI 框架 的 入 门 图 书 , 主要 面向 具有 较 强 学 习 能 力 或 一 定编 程 基础 的 初 
学 者 ， 初 学 者 可 以 按照 篇 目 顺序 依次 阅读 和 学 习 ， 逐 渐 掌 握 前 端 开发 的 基础 技术 和 YUI 框 
架 的 实用 开发 技术 。 
当然 ， 在 阅读 本 书 之 前 ， 读 者 如 果 能 对 XHTML/HTML 或 XML 等 标记 语言 和 CSS 样 
式 表 具有 一 定 的 了 解 ， 具备 一 定 的 JavaScript 基础 知识 和 一 些 面向 对 象 程序 设计 理论 知识 ， 
则 在 理解 本 书 讲述 的 各 种 程序 开发 思路 时 ， 会 更 得 心 应 手 。 
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如 果 读 者 已 经 具有 相当 水 准 的 Web 开发 基础 或 已 经 熟练 掌握 一 般 前 端 开发 技术 , 则 可 
以 直接 跳 过 第 一 篇 ， 从 第 二 篇 中 的 后 半 部 分 开始 学 习 , 或 者 直接 学 习 第 三 篇 的 YUI 框架 内 
容 。 相 信 通 过 第 三 篇 正文 中 的 大 量具 体 实例 ， 读 者 可 以 非常 容易 地 了 解 YUI 框架 的 特点 以 
及 开发 方式 。 


2. 主要 内 容 


第 一 篇 作为 全 书 的 开篇 ,简要 介绍 了 Web 开发 的 各 种 理论 基础 ， 以 及 采用 的 相关 静态 
技术 ， 包 括 HTML、CSS 等 ， 帮 助 开发 者 了 解 前 端 界面 的 显示 方法 。 

第 二 篇 通 篇 承上启下 ， 介 绍 了 Web 前 端 交 互 的 相关 背景 ， 以 及 Javascript 脚本 语言 的 
语法 、 基 本 开发 方式 、 面 向 对 象 的 程序 设计 以 及 Web 开发 中 采用 的 其 他 交互 技术 ， 如 浏览 
器 对 象 、HTML DOM 以 及 前 端 事件 的 处 理 等 ， 为 开发 者 们 学 习 YUI 框架 打下 基础 。 

第 三 篇 以 较 大 的 篇 幅 详 细 介 绍 了 YUI 框架 的 基本 知识 ， 加 载 和 使 用 YUI 的 模块 ， 自 
定义 模块 和 YUI 辅助 工具 ， 以 及 使 用 YUI 框架 处 理 DOM 元 素 和 节点 、 处 理 增强 事件 、 操 
作 样 式 表 等 前 端 交互 的 方式 。 最 后 ， 还 重点 介绍 了 使 用 YUI 框架 来 实现 前 后 端 异 步 数据 交 
互 的 方法 。 通 过 这 些 内 容 ， 开 发 者 可 以 与 后 端 程序 员 配合 开发 出 完整 的 Web 项 目 。 

全 书 以 阶梯 的 方式 逐 级 介绍 各 种 相关 知识 ， 由 浅 入 深 ， 由 易 至 难 ， 但 又 结构 清晰 。 用 
户 可 以 根据 实际 的 需要 ， 选 择 性 地 阅读 相关 篇 章 即时 补充 知识 ， 满 足 生 产 环境 的 需求 。 


3. 学 习 准 备 工作 


在 学 习 本 书 所 讲解 的 内 容 时 ， 读 者 需要 有 一 台 可 以 联接 互联 网 的 计算 机 ， 并 安装 
Windows 或 Mac OS 操作 系统 。 除 此 之 外 ， 读 者 还 应 在 操作 系统 中 安装 以 下 几 款 软件 ， 包 
括 至 少 一 款 主流 的 Web 浏览 器 (例如 Internet Explorer 8.0、Firefox 3、Opera 10 或 它们 的 
更 新 版 本 )、 一 款 文本 编辑 器 〈Notepad ++) 或 其 他 有 效 的 开发 平台 工具 (Dreamweaver、 
Zend Studio、Eclipse 或 WebStorm 等 )。 本 书 所 有 实例 均 采 用 WebStorm 开发 。 如 果 读 者 需 
要 使 用 Ajax 前 后 端 交 互 功能 ， 则 需要 安装 服务 器 端 软件 (例如 Apache、IIS)、PHP 编译 
器 以 及 数据 库 软 件 (MySQL、SQL Server) 等 ， 并 正确 地 配置 服务 器 环境 。 

在 学 习 YUI 框架 时 ， 读 者 可 能 会 频繁 使 用 浏览 器 调试 工具 〈 例 如 Internet Explorer 自 
带 的 正 开发 人 员工 具 、Firefox 的 Firebug 插件 或 Opera 的 DragonFly 工具 )。 在 选择 了 对 
应 的 Web 浏览 器 后 ， 需 要 确认 这 些 浏览 器 调试 工具 可 以 正常 工作 。 


4. 示例 源 代码 
示例 源 代 码 本 身 仅仅 是 向 开发 者 介绍 某 种 需求 的 应 对 方法 。 基 于 篇 幅 的 限制 ， 在 本 书 


的 正文 中 ， 可 能 不 会 提供 全 部 的 示例 代码 ， 而 仅仅 提供 其 中 最 重要 的 部 分 ， 而 对 于 这 些 纯 
数据 性 的 内 容 ， 开 发 者 可 以 根据 代码 的 结构 自行 补充 或 将 其 忽略 。 


5. 勘误 声明 


尽管 本 书 作 者 已 竭尽 所 能 地 勘察 校 验 ， 但 是 错误 总 是 难以 避免 。 如 果 读 者 在 本 书 中 找 
到 了 错误 ， 例 如 文法 错误 或 代码 错误 ， 请 告知 本 书 作 者 ， 以 便 作者 能 够 尽快 改正 错误 ， 在 
此 致 以 由 衷 的 感谢 。 
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第 1 篇 ” 筑 基 篇 


随 着 计算 机 技术 和 互联 网 技术 的 进步 和 推广 ， 计 算 机 和 互联 网 已 经 极 大 地 
改变 了 大 众 的 生活 方式 和 工作 方式 ,各 种 Web 应 用 如 雨后春笋 般 鞍 勃发 展 起 来 。 
Web 应 用 相 比 传统 的 C/S 架构 应 用 程序 ， 其 特点 是 更 “ 轻 ”>， 更 便捷 ， 与 普通 人 
的 结合 也 更 加 紧密 。 相 对 而 言 ， 开 发 Web 应 用 的 难度 也 就 更 大 ， 需 要 采用 更 多 
复杂 的 技术 来 实现 。 

本 篇 立足 于 开发 Web 应 用 所 必须 掌握 的 一 些 基 础 知识 ， 例 如 Web 的 原理 、 
开发 工具 、 开 发 模式 、 项 目 协作 、 项 目 代码 管理 、 代 码 调试 等 ， 以 及 Web 开发 
所 采用 的 各 种 基本 静态 开发 技术 ， 包 括 XHTML 结构 语言 、CSS 样式 表 等 。 通 
过 在 有 限 的 篇 幅 中 介绍 这 些 基础 知识 ， 帮 助 用 户 初 帘 Web 开发 之 门 径 。 


第 1 章 Web 开发 基础 


Web 开发 与 其 他 软件 工程 的 开发 一 样 ， 是 一 个 庞大 的 系统 工程 ， 其 与 其 他 类 型 的 软件 
工程 又 有 极 大 的 区 别 。 在 开发 其 他 软件 工程 时 ， 开 发 者 仅 需 要 了 解 项 目 所 使 用 的 一 种 编程 
语言 以 及 数据 库 的 操作 语言 即 可 ， 而 Web 开发 涵盖 了 极其 广阔 的 技术 ,需要 开发 者 熟练 党 
握 多 种 开发 语言 ， 并 能 够 使 用 各 种 工具 。 

Web 开发 项 目 比 传统 软件 工程 项 目 更 加 复杂 和 多 样 ， 对 开发 者 的 要 求 也 更 高 。 那 么 
Web 开发 者 需要 了 解 哪些 技术 呢 ? 这 就 是 本 章 需 要 介绍 的 内 容 。 


1.1 什么 是 Web 


从 字面 上 理解 ，Web 即 “ 网 ”是 对 全 球 无 数 错综复杂 的 终端 设备 上 的 各 种 数据 资源 
的 具象 化 命名 。 在 软件 开发 领域 ，Web 等 同 于 万 维 网 ， 又 被 称 作 WWW (World Wide Web， 
W3) 等 。Web 并 不 等 同 于 互联 网 (Intemet)， 其 仅仅 是 依托 互联 网 的 一 项 服务 ， 也 可 以 被 
称 作 互联 网 业务 的 一 个 子 集 。 使 用 Web, 就 是 通过 指定 的 协议 从 互联 网 中 发 布 或 获取 数据 。 


1.1.1 WWW 的 产生 


自从 人 类 第 一 台 计 算 机 ABC (Atanasoff-Berry Computer， 阿 塔 纳 索 夫 - 贝 瑞 计 算 机 ) 
诞生 以 来 ， 学 者 们 认为 不 同 的 计算 机 之 间 需 要 进行 通信 和 数据 的 传输 ， 以 提高 科学 数据 的 
分 享 范 围 和 计算 机 系统 的 使 用 效率 。 

以 上 理由 直接 促使 美国 国防 部 于 20 世纪 60 年 代 研 发 和 组 建 了 人 类 历史 上 第 一 个 计算 
机 网 络 一 一 APPA 网 络 , 并 在 1973 年 将 该 网 络 扩展 成 为 一 个 跨国 际 的 通信 网 络 一 一 互联 网 
(Internet)， 实 现 由 美国 到 英国 和 挪威 的 远程 计算 机 联接 ， 并 逐渐 延伸 到 全 世界 范围 。 

早期 的 互联 网 仅 用 于 学 术 以 及 军事 用 途 ， 且 仅 支 持 传递 普通 的 文本 数据 和 富 文本 数 
据 。 虽 然 相 比 基 于 模拟 技术 的 电话 和 电报 ， 互 联网 已 是 极 大 的 技术 进步 ， 但 是 其 仍然 具有 
一 定 的 局 限 性 。 

1990 年 ， 麻 省 理工 学 院 教授 蒂 姆 。 伯 纳 斯 - 李 锅 士 〈Sir Tim Bermers-Lee) 首次 将 超 文 
本 系统 、 传 输 控制 协议 以 及 域名 系统 结合 在 一 起 ， 架 设 了 世界 上 第 一 个 Web 站 点 ， 并 开发 
了 世界 上 第 一 个 Web 浏览 器 和 Web 开发 工具 WWW (World Wide Web)。WWW 浏览 器 在 
NeXTSTEP 操作 系统 的 工作 站 和 欧洲 原子 能 研究 组 织 的 互联 网 节点 内 运行 。 

WWW 以 及 第 一 个 站 点 的 建立 ， 正 式 标志 着 万 维 网 的 诞生 。 但 是 早期 的 万 维 网 仍然 仅 
应 用 于 学 术 用 途 ， 并 不 向 普通 人 开放 。 直 至 1993 年 4 月 30 日 ， 欧 洲 原子 能 研究 组 织 才 正 
式 将 万 维 网 向 普通 公众 免费 开放 ， 至 此 ， 真 正 意义 的 万 维 网 才 为 普通 大 众 所 用 ， 从 根本 上 
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改变 了 人 类 的 生活 方式 。 
1.1.2 万 维 网 的 发 展 


在 欧洲 原子 能 研究 组 织 宣布 免费 向 公众 提供 万 维 网 服务 之 后 ， 万 维 网 经 历 了 三 次 较 大 
的 发 展 过 程 ， 包 括 “.com” 时 代 、“Web 2.0” 时 代 以 及 正在 进行 的 “Web 3.0” 时 代 等 。 


1.“.com” 时 代 


“.com” 时 代 历 经 1998 一 2001 年 ， 是 万 维 网 发 展 和 普及 的 时 代 。 在 此 之 前 ， 电 子 数据 
交换 已 经 被 一 些 企业 作为 一 种 商务 手段 ， 但 应 用 范围 比较 有 限 。 在 此 之 后 ， 随 着 个 人 计算 
机 的 普及 ， 万 维 网 由 学 术 界 和 军 方 为 主要 用 户 群 体 的 历史 被 终结 ， 万 维 网 真正 走向 了 普通 
公众 ， 大 量 基于 HTML 技术 的 网 站 被 建立 起 来 ， 包 括 门户 网 站 、 企 业 网 站 、 电 子 商务 网 站 
和 个 人 主页 等 。 

“.com” 时 代 的 Web 站 点 最 主要 的 特点 是 信息 发 布 。 在 这 一 时 代 ， 各 种 类 型 的 信息 生 
产 发 布 平 台 成 为 了 人 们 获取 信息 的 主流 渠道 ， 同 时 ， 电 子 商务 被 作为 一 种 全 新 的 商务 模式 
建立 起 来 ， 越 来 越 多 的 用 户 开 始 通过 万 维 网 来 购买 商品 ， 采 购 各 种 生产 生活 资料 。 


2.“Web 2.0” 时 代 


在 “.com” 时 代 ， 最 主要 的 万 维 网 服务 是 新 闻 服 务 ， 其 特点 是 以 广播 的 形式 向 终端 用 
户 发 布 信息 ， 本 质 上 仍然 是 传统 媒体 的 延伸 和 发 展 。“Web 2.0” 这 一 概念 是 一 种 全 新 的 互 
联网 服务 方式 ， 相 比 传统 的 互联 网 服务 ,“Web 2.0” 时 代 更 注重 促进 网 络 上 人 与 人 之 间 的 
信息 交换 和 协同 合作 ， 模 式 更 加 以 用 户 为 中 心 。 

在 “Web 2.0” 时 代 ， 互 联网 服务 的 主体 从 门户 网 站 转变 为 网 络 社区 、Web 应 用 程序 、 
社交 网 站 、 博 客 以 及 互动 百科 程序 等 。 这 些 服 务 的 特点 就 是 交互 传播 ， 即 终端 用 户 不 仅仅 
是 信息 的 接受 者 ， 同 时 也 是 信息 的 生产 者 和 发 布 者 。 

“Web 2.0” 从 根本 上 改变 了 人 类 互相 交流 的 方式 ， 将 人 类 从 传统 的 面对面 交流 ， 利 用 
电话 、 短 信 、 传 真 和 电报 等 电子 通信 工具 交流 改变 为 通过 各 种 自 媒体 平台 进行 交流 。 

3.“Web 3.0” 时 代 

“Web 3.0” 时 代 是 对 “Web 2.0” 时 代 的 继承 和 发 展 。 在 这 一 时 代 ， 万 维 网 本 身 己 经 被 
转化 成 一 个 巨大 的 数据 库 ， 数 据 被 真正 地 视 为 重要 的 资源 宝库 。 同 时 ， 万 维 网 的 终端 也 逐 
渐 由 传统 的 PC 被 转移 到 了 更 加 丰富 的 智能 化 平台 上 ， 例 如 各 种 手持 计算 机 设备 (PDA、 
平板 电脑 、 智 能 手机 等 ) 或 智能 家 电 设备 。 

“Web 3.0” 时 代 还 延伸 出 了 更 多 的 定义 ， 例 如 “无 处 不 联网 ”的 物 联网 、 云 计算 、 分 
布 式 数据 库 、 开 放 技术 等 。 


1.1.3” Web 终端 的 多 样 化 与 Web 项 目 开 发 


早期 的 万 维 网 是 基于 各 种 专业 化 的 计算 机 服务 器 系统 和 工作 站 系统 的 。 随 着 个 人 计算 
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机 (PC) 技术 的 逐渐 发 展 ， 越 来 越 多 的 个 人 计算 机 被 投入 到 家 庭 生活 中 ， 逐 渐 成 为 人 们 生 
活 不 可 或 缺 的 部 分 。 万 维 网 的 终端 载体 也 逐渐 由 企业 级 的 服务 器 和 工作 站 发 展 为 各 式 各 样 
的 品牌 个 人 计算 机 、 兼 容 计算 机 、 苹 果 计 算 机 等 。 

在 20 世纪 90 年 代 初期 ， 全 世界 绝 大 多 数 国家 和 地 区 都 已 经 发 展 出 了 以 个 人 计算 机 为 
终端 的 互联 网 络 。 当 时 ， 绝 大 多 数 的 Web 站 点 都 是 为 这 些 个 人 计算 机 用 户 服务 的 。Web 项 
目的 开发 者 依托 个 人 计算 机 终端 的 各 种 浏览 器 作为 开发 的 目标 ， 仅 需要 针对 这 些 浏览 器 进 
行 项 目 调 试 和 测试 。 

然而 ， 随 着 计算 机 小 型 化 技术 的 发 展 和 智能 化 芯片 技术 的 广泛 应 用 ，1992 年 ， 一 种 全 
新 的 手持 终端 设备 被 研发 出 来 ， 这 种 设备 就 是 PDA (Personal Digital Assistant， 个 人 数码 
助理 )。 第 一 款 PDA 设备 是 苹果 电脑 的 “牛顿 ”。 

相对 于 传统 计算 机 , PDA 的 特点 是 轻便 、 小 巧 、 可 移动 性 强 , 同时 又 不 失 功 能 的 强大 。 
其 采用 存储 卡 为 外 存 介 质 ， 通 过 红外 或 蓝牙 接口 等 无 线 传输 来 保障 数据 通信 。“ 牛顿 ”这 一 
产品 本 身 在 商业 上 并 未 取得 成 功 ,但 是 其 他 公司 借鉴 此 思路 ,推出 了 一 代 又 一 代 PDA 产品 ， 
PDA 的 功能 也 日 趋 完善 起 来 ， 最 重要 的 是 ，PDA 开始 支持 与 PC 一 样 的 万 维 网 浏览 功能 ， 
通过 移动 网 络 与 互联 网 的 其 他 终端 联接 。 

PDA 产品 的 发 展 也 带动 了 其 他 一 些 智 能 设备 的 发 展 ， 包 括 智能 手机 、 平 板 电脑 等 设备 
逐渐 地 发 展 起 来 。 另 外 ， 传 统 的 大 家 电 也 有 智能 化 的 趋势 ， 例 如 电视 、 机 项 盒 等 视听 家 电 
逐渐 也 在 采用 各 种 移动 操作 系统 ， 支 持 从 万 维 网 获取 媒体 资源 展示 给 用 户 。 

各 种 Web 终端 的 多 样 化 直接 导致 了 Web 开发 工作 的 复杂 性 。 传 统 的 Web 站 点 开发 ， 
开发 者 需要 测试 的 平台 仅 包 括 各 种 版 本 类 型 的 Web 浏览 器 ， 例 如 Intemet Explorer、Apple 
Safari、Mozilla Firefox 等 。 随 着 Web 终端 的 多 样 化 ， 各 种 分 辨 率 和 色彩 模式 的 设备 层 出 不 
穷 ， 各 种 人 机 交互 方式 的 不 断 革 新 由 传统 的 鼠标 、 键 盘 逐 渐 演化 为 触摸 屏 设备 、 体 感 设 
备 等 )， 开 发 者 需要 面 对 的 调试 和 测试 平台 也 越 来 越 多 。 

现代 的 Web 开发 者 往往 需要 了 解 更 多 的 设备 类 型 和 设备 特点 , 需要 掌握 更 多 的 开发 语 
言 和 交互 开发 技术 等 ， 这 些 全 新 的 技术 为 Web 开发 者 带 来 了 更 大 的 挑战 。 


1.2 Web 前 端 开发 技术 基础 


Web 项 目前 端 开发 是 指 面向 终端 用 户 的 Web 项 目 开发 工作 , 其 涵盖 了 万 维 网 技术 、 计 
算 机 软件 开发 技术 、 人 机 交互 技术 等 领域 ,是 复杂 的 系统 工程 。 在 开发 Web 项 目 时 ， 需 要 
与 多 种 计算 机 软件 开发 技术 相 结 合 。 


1.2.1 Web 站 点 的 构成 


Web 站 点 本 身 是 一 种 基于 浏览 器 的 软件 系统 。 和 绝 大 多 数 软件 类 似 ， 该 系统 分 为 两 个 
主要 的 部 分 ， 即 面向 终端 用 户 的 前 端 部 分 ， 以 及 面向 服务 器 和 底层 数据 的 后 端 部 分 。 


1. Web 前 端 


Web 前 端 即 面向 Web 前 台 终端 用 户 的 软件 功能 模块 的 集合 。Web 前 端 需要 解决 的 问题 
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主要 包括 三 点 ， 即 显示 内 容 、 显 示 效 果 以 及 捕获 交互 。 
口 显示 内 容 
Web 站 点 建设 的 目的 即 向 终端 用 户 展示 信息 内 容 ， 包 括 各 种 文本 、 图 像 、 音 频 、 视 频 
和 动画 等 。 除 此 之 外 , 还 包括 基于 超 文 本 技术 的 链接 等 ， 以 实现 信息 内 容 之 间 的 承接 关系 。 

口 显示 效果 

在 提供 显示 内 容 时 , Web 站 点 还 应 支持 为 这 些 显示 内 容 进 行 美化 , 提供 各 种 样式 效果 ， 
例如 文本 的 尺寸 、 字 体 、 前 景色 、 背 景色 ， 图 像 的 阴影 、 边 框 等 。 使 用 这 些 效果 的 目的 是 
突出 局 部 显示 内 容 ， 或 将 显示 内 容 以 更 加 美观 的 方式 展示 给 终端 用 户 。 

口 捕获 交互 

Web 站 点 与 传统 媒体 相 比 ， 本 身 具 有 更 强大 的 互动 功能 。 这 些 互动 功能 是 通过 捕获 用 
户 的 操作 并 提供 相关 的 反馈 来 实现 的 。 现 代 的 Web 站 点 支持 捕获 用 户 的 鼠标 操作 、 键 盘 操 
作 、 触 屏 操作 甚至 体感 操作 , 通过 这 些 丰 富 的 交互 操作 帮助 终端 用 户 获得 更 佳 的 操作 体验 ， 
以 及 更 加 便捷 的 信息 获取 方式 等 。 


2. Web 后 端 


Web 后 端 是 指 Web 站 点 中 面向 后 台数 据 库 、 服 务 器 端 , 用 于 存储 数据 和 为 前 端 提供 显 
示 的 基础 数据 的 功能 模块 。Web 后 端 主要 负责 管理 和 维护 ， 以 及 为 前 端 功能 模块 提供 Web 
站 点 的 各 种 准确 数据 。Web 后 端 通常 包含 以 下 几 个 模块 。 

口 账户 及 权限 管理 

Web 后 端的 使 用 和 维护 通常 由 Web 站 点 的 管理 员 以 及 其 他 分 工 的 工作 人 员 完 成 , 因此 
为 保障 整个 系统 的 安全 运行 ， 需 要 通过 设置 口令 的 方式 为 站 点 的 各 种 操作 角色 加 密 ， 保 障 
所 有 对 Web 站 点 的 操作 都 是 在 符合 管理 规范 的 情况 下 进行 的 ， 防 止 越权 和 非法 提 权 操作 。 

口 站 点 内 容 管理 

Web 后 端的 主要 工作 即 维护 为 Web 前 端 提 供 各 种 信息 的 数据 , 例如 站 点 的 新 闻 、 产 品 、 
各 种 分 类 信息 以 及 公告 等 。 这 些 内 容 的 管理 模块 即 站 点 内 容 管 理 模 块 。 

口 数据 库 管 理 

数据 库 是 一 种 用 来 存储 、 操 作 和 管理 数据 的 工具 软件 。 绝 大 多 数 Web 站 点 都 需要 采用 
数据 库 来 管理 各 种 数据 信息 ， 以 便 动 态 更 新 站 点 的 内 容 。Web 后 端 用 来 操作 数据 库 的 模块 
即 数据 库 管理 模块 。 


1.2.2” Web 开发 标准 


Web 前 端 开发 从 根本 上 讲 就 是 为 了 实现 Web 前 端 需要 解决 的 显示 内 容 、 显 示 效 果 和 捕 
获 交 互 的 问题 ， 即 Web 的 结构 、 表 现 和 行为 。 最 初 ， 各 种 Web 浏览 器 以 及 其 采用 的 技术 
五 花 八 门 ， 各 种 Web 浏览 器 都 通过 自 定义 的 技术 来 描述 Web 页 面 的 各 种 元 素 ， 同 时 ， 这 
些 Web 浏览 器 也 都 采用 各 自发 明 的 脚本 语言 来 丰富 页 面 元 素 的 交互 。 

这 种 各 自 为 战 的 混乱 局 面 直接 导致 Web 开发 者 无 所 适 从 ， 开 发 的 Web 应 用 在 不 同 的 
Web 浏览 器 中 往往 面目 全 非 。 由 于 这 些 Web 浏览 器 的 拥 瑟 都 数量 巨大 ， 开 发 者 们 甚至 会 在 
自己 建立 的 Web 站 点 上 标注 “本 站 点 仅 限 XX 浏览 器 用 户 浏览 ”( 第 一 次 浏览 器 大 战 时 期 
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确实 有 很 多 开发 者 这 么 做 )。 

在 这 种 情况 下 , 业内 对 统一 Web 标准 的 呼声 也 就 越 来 越 高 , 基于 此 , W3C (World Wide 
Web Consortium， 国 际 万 维 网 协会 ， 一 个 非 政府 的 万 维 网 标准 制订 和 推广 组 织 ) 和 ECMA 
国际 《欧洲 计算 机 制造 商 协会 发 展 而 来 的 一 个 国际 化 信息 与 电信 企业 协会 ) 发 展 了 多 种 为 
Web 开发 制订 的 标准 ， 分 别 应 用 于 Web 的 结构 、 表 现 和 行为 ， 这 就 是 XHTML 结构 语言 、 
CSS 层 倒 样式 表 和 ECMAScript 脚本 语言 。 


1. XHTML 结构 语言 


XHTML (Extensible HyperText Markup Language， 可 扩展 的 超 文本 标记 语言 ) 是 基于 
传统 的 HIML 发 展 而 来 ， 并 以 XML (Extensible Markup Language， 可 扩展 的 标记 语言 
的 严格 规范 重新 订 制 的 结构 语言 。 

在 2000 年 1 月 26 日 XHTML 语言 正式 被 W3C 发 布 和 提交 给 ISO (International 
Organization for Standardization， 国 际 标准 化 组 织 )， 成 为 网 页 设计 的 国际 标准 化 开发 语言 ， 
替代 了 早期 的 HTML 3.2 和 HTML 4.0。 

XHTML 语言 的 特点 是 严谨 和 具有 严格 的 结构 与 书写 格式 ， 因 此 被 各 种 设备 和 软件 解 
析 时 更 加 高 效 和 便捷 。 同 时 ，XHTML 还 具有 较 强 的 扩展 性 ， 可 以 为 各 种 不 同类 型 的 终端 
设备 所 支持 。 同 时 ，XHTML 在 绝 大 多 数 语法 和 标记 的 使 用 上 都 能 够 兼容 传统 的 HTML， 
因此 一 经 推出 立即 为 业界 所 接受 ， 并 被 迅速 大 范围 应 用 。 

如 今 , XHTML 是 被 当前 各 种 Web 浏览 器 完全 支持 的 主流 版 本 。 未 来 新 的 Web 结构 语 
言 为 由 XHTML 衍生 和 发 展 而 来 的 HTML 5.0, 但 HTML 5.0 尚未 订 制 完毕 , 因此 只 有 一 些 
Web 浏览 器 支持 其 部 分 功能 。 本 书 开发 所 使 用 的 Web 结构 语言 仍然 是 XHTML1.0。 


2. CSS 层 茎 样式 表 


早期 的 Web 应 用 是 通过 HTML 不 完善 的 表现 描述 功能 实现 Web 元 素 的 样式 变换 的 。 
由 于 HIML 功能 的 局 限 性 ， 一 些 Web 浏览 器 的 开发 者 发 明了 各 种 样式 表现 语言 来 对 Web 
元 素 进 行 增强 描述 ， 使 得 样式 描述 语言 越 来 越 混乱 。 

1994 年 ， 在 欧洲 原子 能 研究 组 织 工作 的 哈 康 。 列 (Hakon Wium Lie)、 带 姆 。 伯 纳 斯 - 
李 狠 士 (Sir Tim Berners-Lee) 以 及 罗伯特 。 卡 里 奥 (Robert Cailliau) 结合 之 前 已 经 被 使 用 
的 各 种 样式 语言 , 共同 研究 和 发 明了 一 种 全 新 的 样式 描述 语言 CSS(Cascading Style Sheets， 
层 登 样式 表 )， 通 过 选择 器 -样式 代码 的 键 值 对 方式 来 描述 Web 页 面 的 各 种 元 素 。 

1995 年 ， 哈 康 。 列 对 外 正式 发 布 了 CSS 样式 表 语 言 ， 并 和 W3C 进行 了 讨论 ， 对 CSS 
样式 表 语 言 进 行 了 修订 ， 使 其 更 加 符合 Web 语言 的 特性 。 

1996 年 ，CSS 样式 表 语 言 的 第 一 版 正式 完成 ， 并 于 当年 12 月 发 布 ， 被 称 作 CSS 1.0。 
该 语言 被 推出 后 ， 并 未 被 广泛 采用 。 世 界 上 第 一 款 完全 支持 CSS 1.0 的 Web 浏览 器 是 2000 
年 微软 公司 开发 的 运行 于 Macintosh 系统 的 Intemet Explorer 5.0。 随 后 , 随 着 Internet Explorer 
版 本 的 升级 和 市 场 份额 的 逐渐 扩大 ，CSS 1.0 才 得 以 广泛 使 用 。 

W3C 在 1998 年 5 月 发 布 了 更 新 的 CSS 2.1 规范 , 修改 了 CSS 1.0 的 一 些 错误 和 不 被 支 
持 的 内 容 ， 并 增加 了 一 些 已 经 被 多 种 Web 浏览 器 添加 的 扩展 内 容 ， 但 是 时 至 今日 ， 尚 未 有 
任何 一 款 Web 浏览 器 完全 支持 所 有 CSS 2.1 的 内 容 ， 即 使 CSS2.1 是 当前 的 事实 标准 。 
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CSS 的 更 新 版 本 CSS 3.0 于 1999 年 开始 制订 ,但 由 于 其 发 展 方向 不 断 被 修改 和 订正 ， 
直到 2011 年 6 月 ， 其 才 为 W3C 的 CSS 发 展 小 组 发 布 ， 成 为 公开 的 Web 开发 标准 。 目 前 ， 
只 有 最 新 的 Web 浏览 器 才 支 持 其 部 分 功能 ， 也 尚未 有 任何 Web 浏览 器 能 够 支持 其 全 部 
功能 。 

CSS 4.0 版 本 已 经 开始 制订 ， 但 何 时 发 布 ， 何 时 能 被 所 有 主流 Web 浏览 器 采用 仍然 遥 
遥 无 期 。 基 于 此 ， 本 书 仍然 以 CSS 2.1 为 基础 ， 在 之 后 部 分 章节 中 采用 一 些 CSS 3.0 的 技术 。 


3. ECMAScript 脚本 语言 


早期 的 Web 应 用 通过 HTML 的 表单 元 素来 实现 与 用 户 的 交互 和 简单 的 行为 。 随 着 用 
户 交 互 的 日 趋 复杂 , 各 种 Web 浏览 器 都 采用 了 基于 自身 而 设计 的 脚本 语言 来 实现 更 加 复杂 
的 Web 行为 ， 例 如 Netscape Navigator 浏览 器 采用 的 是 Netscape 公司 和 Sun 公司 开发 的 
Javascript， 而 Intemet Explorer 则 采用 的 是 微软 公司 开发 的 VBScript 脚本 语言 。 

这 些 不 同 的 脚本 语言 的 采用 ， 直 接 导致 了 Web 应 用 的 兼容 性 灾难 ， 采 用 不 同 脚本 的 
Web 应 用 仅 能 获得 某 一 种 Web 浏览 器 的 支持 ， 在 另 一 种 Web 浏览 器 中 则 完全 无 法 使 用 。 
基于 此 ， 开 发 者 们 必须 只 选择 一 种 脚本 ， 或 花费 大 量 时 间 和 精力 学 习 和 使 用 多 种 脚本 才能 

1996 年 8 月 ， 为 了 使 Web 浏览 器 获得 更 强 的 兼容 性 ， 微 软 公 司 为 其 Internet Explorer 
浏览 器 引入 了 JScript 脚本 语言 。 这 种 脚本 语言 在 语法 和 解析 方面 实际 上 与 Netscape 公司 和 
Sun 公司 开发 的 Javascript 语 言 基 本 一 致 ,可 以 看 作 是 Javascript 脚 本 语言 的 微软 版 本 。JScript 
脚本 语言 的 诞生 ， 真 正 使 正 浏览 器 能 够 同时 兼容 多 种 脚本 ， 这 一 举措 获得 了 极 大 的 成 功 ， 
同时 也 推动 了 标准 化 的 Web 脚本 语言 的 诞生 。 

1996 年 11 月 ，Netscape 公司 正式 将 Javascript 脚本 语言 提交 给 当时 的 ECMA 国际 ， 
希望 将 该 脚本 语言 正式 申请 为 国际 化 标准 。ECMA 国际 于 1997 年 6 月 正式 采纳 该 脚本 语 
言 ， 并 制订 基于 ECMA-262 的 国际 标准 ， 从 此 ，Javascript 正式 取代 了 其 他 脚本 语言 ， 成 为 
Web 开发 的 标准 化 语言 。 几 乎 所 有 Web 浏览 器 厂商 都 围绕 ECMA-262 标准 开发 了 基于 自 
身 软 件 的 Javascript 子 集 ， 以 便 与 ECMA 官方 标准 接轨 。ECMA-262 标准 迄今 为 止 发 展 出 
了 6 个 主要 的 版 本 ， 其 特点 如 表 1-1 所 示 。 


表 1-1 ECMA-262 发 展 而 来 的 版 本 

版 本 发 布 时 间 特点 

第 1 版 1997 年 6 月 初始 版 本 

第 2 版 1998 年 6 月 格式 修正 ， 使 其 符合 ISO/TEC16262 国际 标准 

第 3 版 1999 年 12 月 ”增加 正则 表达 式 、 语 法 作用 域 链 处 理 、 新 的 控制 指令 、 异 常 处 理 、 错 误 定 
义 以 及 数据 输出 格式 化 等 改进 

第 4 版 未 发 布 该 版 本 被 放弃 ， 其 部 分 功能 被 引入 第 5 版 ， 其 中 部 分 用 于 XML 的 读 写 功 
能 被 一 些 厂商 使 用 ， 称 为 E4X 

第 5 版 2009 年 12 月 “新 增 严 格 模式 “strict mode”, 更 彻底 的 错误 检查 机 制 , 对 第 三 版 更 加 细 化 ， 
增加 部 分 新 功能 如 getters、setters， 支 持 JSON 对 象 和 更 完整 的 反射 

第 5.1 版 ” 2011 年 6 月 完全 参照 ISO/IEC16262:2011 国际 标准 制订 语法 和 格式 
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除 以 上 5 个 ECMA 版 本 外 ,第 6 版 和 第 7 版 正在 紧张 制订 中 。 未 来 的 ECMAScript 脚 
本 将 增加 更 多 新 的 概念 及 语言 特性 。 

ECMAScript 本 身 是 一 个 开发 语言 标准 。 实 际 上 绝 大 多 数 Web 开发 者 使 用 的 是 基于 
ECMAScipt 标准 而 制订 的 各 种 ECMAScript 子 集 。 这 些 子 集 大 多 由 Web 浏览 器 和 Web 排 
版 引擎 平台 的 开发 商 编写 和 实现 。 目 前 ， 基 于 ECMAScript 脚本 语言 的 子 集 主 要 有 以 下 几 
种 ， 如 表 1-2 所 示 。 


表 1-2 ECMAScript 脚本 语言 的 平台 和 子 集 


开发 商 ”名 称 平台 ECMA 版 本 

Mozilla Javascript Gecko 排版 引擎 ECMA-262 第 5 版 

Google Javascript V8 排版 引擎 ECMA-262 第 5 版 

Microsoft ~ JScript Trident 排版 引擎 ECMA-262 第 5 版 

Apple Javascript KHTML、WebKit 排版 引擎 ECMA-262 第 3 版 

Opera ECMAScript 。 Presto 排版 引擎 ECMA-262 第 5 版 

Microsoft JScriptNET .NET Framework ECMA-262 第 3 版 

Adobe ActionScript 。 Flex Framework 以 及 Flash VM ”ECMA-262 第 3 版 及 第 4 版 的 XML 部 

分 (E4X) 


早期 的 Web 浏览 器 往往 使 用 各 自 开 发 的 排版 引擎 ， 每 一 种 排版 引擎 对 应 一 个 品牌 的 
Web 浏览 器 ， 这 些 Web 浏览 器 才 是 最 终 为 终端 用 户 解析 Web 项 目 代 码 的 平台 。 随 着 Web 
浏览 器 的 发 展 ， 如 今 绝 大 多 数 Web 浏览 器 更 愿意 采用 开源 的 通用 排版 引擎 ， 以 使 自身 更 符 
合 Web 标准 化 的 需求 。 各 种 排版 引擎 与 Web 浏览 器 的 对 应 关系 如 表 1-3 所 示 。 


表 1-3 Web 排版 引擎 与 Web 浏览 器 


排版 引擎 ”浏览 器 排版 引擎 浏览 器 
Gecko Netscape Navigator、Firefox 系列 Trident Internet Explorer 3.0 到 10.0 
Web 浏览 器 
Presto Opera 3.5 到 12.0 WebKit Internet Explorer 11.0、Opera 13.0 及 之 
后 版 本 的 Opera 浏览 器 、Safari 浏览 器 、 
Chrome 浏览 
V8 Chrome 浏览 器 


目前 ， 绝 大 多 数 主 流 Web 浏览 器 都 已 经 开始 采用 WebKit 排版 引擎 ， 以 追求 更 符合 
Web 标准 化 的 代码 解析 方式 ,为 开发 者 和 终端 用 户 提供 更 完善 的 体验 。 未 来 的 Web 浏览 器 
在 Web 排版 和 脚本 解析 方面 更 加 趋 于 统一 和 融合 ， 为 开发 者 提供 兼容 性 更 强 的 展示 平台 。 


1.2.3 ”Web 前 端 技术 的 松 耦 合 


Web 前 端的 开发 是 和 终端 用 户 进行 交流 的 过 程 。 早 期 的 Web 前 端 基本 上 是 通过 HTML 
语言 来 解决 所 有 问题 ， 包 括 使 用 HTML 显示 文档 内 容 ， 描 述 显 示 效 果 ， 并 通过 HTML 的 
表单 控件 来 实现 简单 的 交互 捕捉 。 

随 着 计算 机 技术 的 发 展 和 普及 ， 越 来 越 多 的 终端 用 户 开始 追求 表现 更 加 美观 ， 交 互 更 
加 便捷 的 Web 应 用 。 传 统 的 HTML 语言 整 端 逐渐 开始 展现 ， 其 已 经 很 难 再 满足 终端 用 户 
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和 开发 者 在 美观 和 交互 便捷 方面 的 需求 ， 这 迫使 Web 前 端 开 发 者 不 断 使 用 更 新 的 技术 ， 为 
终端 用 户 呈 现 更 加 丰富 的 显示 效果 和 交互 。 

同时 ， 由 于 使 用 的 标准 化 技术 日 趋 复杂 ， 基 于 维护 的 需要 ， 越 来 越 多 的 开发 者 将 前 端 
代码 根据 结构 、 表 现 和 行为 划分 为 三 个 彼此 隔离 且 相互 作用 的 层 。 其 中 ，XHTML 结构 语 
言 用 来 定义 页 面 的 数据 和 语义 ，CSS 样式 表 用 来 为 页 面 元 素 添加 样式 和 各 种 视觉 效果 ， 
Javascript 脚本 语言 用 来 为 页 面 元 素 添 加 行为 和 交互 ， 其 层次 关系 如 图 1-1 所 示 。 


行为 (Javascript ) 表现 ( CSS 样 式 表 ) 


结构 ( XHTML ) 


图 1-1 Web 前 端 代码 的 分 层 


XHTML 在 Web 页 面 中 的 地 位 更 加 底层 ， 其 决定 了 Web 页面 能 够 显示 什么 内 容 。CSS 
样式 表 和 Javascript 脚本 语言 代码 并 不 一 定 相互 依赖 ， 其 本 身 都 是 基于 XHTML 结构 语言 
并 用 来 操作 和 描述 XHTML 元 素 。 

Web 前 端的 结构 、 表 现 和 行为 本 身 具有 一 定 的 相关 性 ， 共 同 组 成 一 个 整体 ， 也 就 是 具 
有 耦合 关系 。 但 是 如 果 结 构 、 表 现 和 行为 耦合 过 紧 ， 则 如 果 修 改 其 中 一 部 分 内 容 ， 对 应 的 
其 他 两 部 分 内 容 也 都 需要 做 出 相应 的 修改 ,而 修改 过 于 频繁 , 则 会 增 大 Web 应 用 的 维护 成 
本 。 基 于 此 种 理由 ，Web 前 端 技术 的 松 耦 合成 为 目前 最 流行 的 开发 方式 。 

开发 松 耦 合 的 Web 项 目 ， 最 重要 的 就 是 将 结构 、 表 现 和 行为 强行 地 隔离 开 : 结构 即 结 
构 ， 表 现 即 表现 ， 行 为 即行 为 。 应 用 到 实际 项 目 中 ， 即 拒绝 使 用 XHTML 的 描述 性 标记 和 
属性 ， 完 全 采用 CSS 样式 表 来 定义 Web 元 素 的 样式 和 视觉 效果 。 同 时 ， 也 应 当 尽 量 避 免 
使 用 Javascript 脚本 语言 来 定义 和 修改 CSS 样式 。 如 果 需 要 动态 地 修改 某 些 元 素 的 样式 ， 
可 以 先 在 CSS 样式 表 中 将 这 些 样式 以 CSS 类 的 方式 预 置 ， 然 后 通过 Javascript 脚本 语言 动 
态 地 为 元 素 添加 类 ， 实 现 动 态 修改 样式 效果 。 

松 艳 合式 的 前 端 开发 可 以 解决 多 个 不 同方 向 的 前 端 开发 者 (结构 开发 、 样 式 开发 以 及 
脚本 开发 ) 之 间 相 互 协作 时 产生 的 各 种 接口 冲突 问题 ， 切 实 提高 前 端 开发 的 效率 ， 同 时 降 
低 项 目 维护 的 成 本 。 因 此 ， 在 前 端 开发 时 应 尽量 采用 松 耦 合 的 方式 进行 开发 。 
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“ 工 欲 善 其 事 ， 必 先 利 其 器 ”。 在 开发 Web 项 目 时 ， 选 择 一 款 功能 强大 、 自 动 化 高 的 开 
发 工具 可 以 切实 提高 开发 效率 ， 降 低 开 发 成 本 。 一 款 成 熟 的 Web 开发 工具 至 少 应 具备 四 种 
主要 的 功能 ， 即 快速 有 效 的 代码 提示 与 补 完 、 强 大 的 自 定义 代码 格式 化 系统 、 版 本 控制 和 
团队 协作 功能 。 目 前 流行 的 Web 开发 工具 主要 有 三 个 系列 ， 即 Dreamweaver 系列 、Eclipse 
系列 极其 衍生 品 以 及 WebStorm 系列 。 
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1.3.1 Dreamweaver 系列 开发 工具 


Adobe Dreamweaver 系列 开发 工具 是 由 Adobe 公司 结合 Golive 、 原 Macromedia 
Dreamweaver 整合 而 成 的 一 套 适合 个 人 开发 者 独力 完成 整个 Web 项 目的 综合 性 开发 平台 。 
Dreamweaver 相 比 其 他 的 开发 工具 具有 体积 小 、 速 度 快 、 功 能 丰富 的 特点 。 它 不 仅 支 持 前 
端 项 目的 开发 ， 还 支持 站 点 的 管理 ，PHP、JSP、ASP 以 及 ASPNET 等 多 种 后 端 程序 的 开 
发 ， 是 一 种 用 途 广 泛 的 开发 工具 。 

Dreamweaver 日 前 最 新 的 版 本 为 Dreamweaver CS6 的 云端 化 版 本 Dreamweaver CC。 相 
比 之 前 的 Dreamweaver CS6，Dreamweaver CC 更 加 强调 了 云端 功能 ， 支 持 用 户 将 各 种 配置 
信息 甚至 站 点 数据 存储 到 云端 ， 实 现 脱离 主机 的 移动 化 开发 。 除 此 之 外 ，Dreamweaver CC 
还 增强 了 可 视 化 的 CSS 面板 工具 ， 并 强化 了 对 JQuery 等 现代 脚本 框架 的 支持 ， 提 高 了 开 
发 效率 。 其 主要 界面 如 图 1-2 所 示 。 
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图 1-2 Dreamweaver CC 的 主体 界面 


虽然 Dreamweaver 具有 强大 的 功能 适应 性 和 代码 提示 补 完 功能 , 但 是 其 在 代码 格式 的 
自 定义 方面 并 不 太 完善 ， 仅 支持 极 少数 的 自 定义 项 目 ， 因 此 往往 无 法 适应 团队 统一 的 代码 
书写 格式 要 求 。 另 外 ， 虽然 Dreamweaver 具有 团队 协作 的 功能 (支持 SVN、VSS 等 团队 协 
作 版 本 控制 工具 ), 但 是 其 功能 并 不 强大 ， 只 能 满足 一 般 团队 协作 要 求 ， 因 此 Dreamweaver 
更 适合 个 人 开发 中 小 型 项 目 ， 不 适合 大 型 项 目的 开发 。Dreamweaver 还 是 一 款 商 业 软 件 ， 
开发 者 需要 购买 才能 使 用 。 


1.3.2 ”Eclipse 系列 及 其 衍生 品 


Eclipse 是 一 种 开源 的 综合 性 开发 平台 , 其 本 身 开 发 的 目的 是 为 解决 Sun 公司 的 闭 源 开 
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发 工具 NetBean 昂贵 而 缺乏 扩展 性 等 问题 。 随 着 大 量 开发 者 贡献 代码 , 今天 的 Eclipse 已 经 
成 为 一 就 具备 强大 功能 和 扩展 性 , 几乎 支持 所 有 常见 的 编程 语言 的 可 扩展 开发 平台 。Eclipse 
除了 适合 程序 开发 者 外 ， 还 适用 于 项 目 设计 、 项 目测 试 等 多 种 开发 用 途 。 

Eclipse 目前 最 新 的 版 本 为 Eclipse 43 Kepler。 新 版 本 更 新 了 整个 扩展 平台 ， 优 化 了 程 
序 执行 效率 ， 对 Git 团队 协作 工具 有 了 更 好 的 支持 。Eelipse 4.3 Kepler 的 主体 界面 如 图 1-3 
所 示 。 


@ Java - Eclipse 回回 枉 : 到 | 
Fle Edit Navigate Search Project Run Window Help 


了 | 国 wacome 名 A 四 = 
= = 二 


Welcome to Eclipse 


Overview Tutorials 
Get an overview of the features Go through tutorials 


Samples 
Try out the samples 


图 1-3 Eclipse 4.3 Kepler 的 主体 界面 


Eclipse 本 身 是 一 个 免费 的 基础 平台 ， 有 具备 强大 的 扩展 性 ， 因 此 全 世界 的 开发 者 为 其 开 
发 了 大 量 的 插件 工具 ， 包 括 对 编程 语言 的 支持 插件 、 代 码 格式 插件 、 视 觉 插件 、 团 队 协 作 
插件 等 。 正 因为 这 些 插件 的 存在 ，Eclipse 才 拥有 强大 的 生命 力 。 

除了 支持 大 量 插件 外 ,由 于 Eclipse 本 身 是 一 个 开源 的 开发 项 目 , 因此 很 多 第 三 方 的 软 
件 开发 商 以 Eclipse 项 目 为 基础 ， 专 门 针对 前 端 开发 对 Eclipse 进行 改写 和 优化 ， 开 发 出 了 
各 种 Eclipse 的 衍生 产品 ， 进 一 步 丰 富 了 Eclipse 本 身 的 功能 和 体验 。 目 前 常见 的 Eclipse 衍 
生产 品 主要 包括 两 种 ， 即 Zend Studio 系列 开发 平台 和 Aptana Studio 系列 开发 平台 。 


1. Zend Studio 系列 开发 平台 


Zend Studio 是 基于 Eclipse 平台 开发 的 最 著名 的 综合 性 开发 平台 , 其 本 身 是 为 解决 PHP 
语言 开发 网 站 后 台 程 序 而 设计 , 但 是 随 着 前 端 开发 技术 的 复杂 化 以 及 在 Web 项 目 开发 中 占 
据 的 比重 逐渐 增 大 ，Zend Studio 的 前 端 开发 功能 也 不 断 地 完善 ， 最 终 形成 了 前 后 端 并 重 的 
功能 。Zend Studio 平台 由 于 采用 了 Eclipse 平台 作为 基础 ， 因 此 支持 绝 大 多 数 Eclipse 平 台 
的 插件 ，Zend 公司 本 身 也 为 Eclipse 平台 贡献 了 大 量 的 代码 和 工具 。 

今天 , 绝 大 多 数 基于 PHP 项 目的 Web 开发 工作 都 是 采用 Zend Studio 平台 完成 的 .Zend 
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Studio 平台 目前 最 新 的 版 本 是 Zend 10.1, 基于 Eclipse 3.4 Juno 创建 。Zend Studio 10.1 的 主 
体 界 面 如 图 1-4 所 示 。 
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Copyright (c) 1998-2013 Zend Technologies Ltd. All rights reseved. 
Vistt htpy/wwwzendcom 


This product is based on Eclipsetechnology， 
Visit httpV/wwweclipseorg 
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图 1-4 Zend Studio 10.1 的 主体 界面 


Zend Studio 开发 平台 最 大 的 特点 就 是 前 后 端 并 重 , 既 支 持 PHP 项 目的 开发 , 提供 大 量 
PHP Zend 框架 的 支持 ， 同 时 也 对 前 端 XHTML、CSS 样式 表 和 Javascript 具有 良好 的 支持 。 
因此 ， 在 开发 基于 PHP 项 目的 Web 前 端 应 用 时 ， 开 发 团队 完全 可 以 全 部 使 用 Zend Studio 
这 一 种 开发 工具 ， 以 获得 无 颖 的 团队 协作 效果 。 

由 于 Zend Studio 开发 平台 对 Eclipse 平台 的 插件 支持 较 好 ， 因 此 ， 如 果 在 开发 工作 中 
需要 采用 其 他 的 Eclipse 工具 ， 完 全 可 以 直接 从 Eclipse 各 种 工具 下 载 站 点 获取 和 安装 ， 通 
过 第 三 方 的 工具 来 拓展 Zend Studio 的 功能 。Zend Studio 是 一 款 商 业 开 发 工具 ， 开 发 者 需 
要 购买 才能 使 用 。 

2. Aptana Studio 系列 开发 平台 


与 Zend Studio 类 似 ，Aptana Studio 开发 平台 也 是 一 款 基 于 Eclipse 平台 开发 的 综合 开 
发 工具 。 相 比 Zend Studio 的 前 后 端 并 重 的 功能 设计 而 言 , Aptana Studio 更 加 强调 前 端 开发 。 
其 针对 前 端 开发 需求 而 专门 设计 ， 因 此 在 前 端 开 发 方向 上 具有 更 加 强大 的 功能 ， 例 如 支持 
更 多 类 型 的 前 端 代码 编写 。 其 代码 提示 和 补 完 功能 也 比 Zend Studio 更 加 人 性 化 , 支持 多 种 
富 客户 端的 开发 方式 。 

Aptana Studio 平台 同样 支持 PHP 开发 ( 相 较 Zend Studio 功能 弱 一 些 )， 另 外 还 支持 
Ruby 项 目 和 Rails 项 目 , 允许 开发 者 通过 多 种 编程 语言 开发 Web 项 目 。 此外, Aptana Studio 
还 支持 强大 的 宏 功 能 ， 提 供 了 大 量 针 对 多 种 开发 语言 的 可 视 化 快速 代码 生成 工具 。 目 前 
Aptana Studio 最 新 版 本 为 3.4.1， 基 于 Eclipse 3.7 Indigo 创建 。Aptana Studio 3.4.1 的 主体 界 
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面 如 图 1-5 所 示 。 
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图 1-5 Aptana Studio 3.4.1 的 主体 界面 


与 Zend Studio 相 比 ，Aptana Studio 在 对 PHP 开发 方面 支持 较 弱 ， 但 是 对 其 他 一 些 轻 
量化 开发 技术 支持 较 好 ， 且 同样 支持 通过 Eclipse 插件 拓展 团队 协作 功能 。 在 对 前 端 代码 的 
提示 和 补 完 方面 ，Aptana Studio 更 胜 一 筹 ， 因 此 如 果 开 发 Python、Ruby & Rails 项 目 或 纯 
前 端 项 目 ，Aptana Studio 可 以 获得 更 佳 的 效率 。 开 发 PHP 项 目 也 可 以 使 用 Aptana Studio。 
早期 的 Aptana 是 一 款 商 业 软 件 , 近年 来 开发 商 以 免费 的 方式 提供 授权 ， 人 允许 在 非 商业 用 途 
的 开发 中 免费 使 用 。 


1.3.3 WebStorm 系列 


除了 Dreamweaver 系列 和 Eclipse 系列 之 外 ， 近 年 来 又 出 现 了 一 款 新 的 基于 前 端 开发 
的 综合 性 开发 平台 ， 即 JetBrains 公司 出 品 的 WebStorm 系列 开发 平台 。 该 平台 是 一 款 全 新 
的 立足 于 前 端 开发 设计 的 开发 工具 ， 是 近年 来 最 受 欢迎 的 前 端 开发 工具 之 一 。 

WebStorm 开发 平台 专门 为 Javascript 脚本 开发 而 设计 ， 为 开发 者 提供 了 众多 强大 的 
Javascript 开发 功能 ， 例 如 支持 编码 导航 和 快速 对 象 查询 ， 支 持 快速 代码 重 构 和 修复 ， 提 供 
了 强大 的 单元 测试 与 调试 工具 。 除 此 之 外 ，WebStorm 还 支持 批量 代码 分 析 和 混合 代码 检查 
与 提示 ， 对 未 来 的 CSS3 、LESS 、 正 则 表达 式 、HIML5 也 提供 了 强大 的 支持 。 相 比 
Dreamweaver 系列 和 Eclipse 系列 ，WebStorm 开发 平台 的 速度 快 ， 是 一 款 高 效 的 轻 量 化 开 
发 工具 。 

WebStorm 的 代码 格式 化 功能 也 同样 强大 。 它 可 针对 各 种 不 同类 型 的 代码 , 支持 几 百 种 
代码 格式 自 定义 工具 。WebStorm 是 一 款 商业 软件 ， 因 此 并 未 提供 扩展 和 插件 的 开发 功能 ， 
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但 是 JetBrains 官方 已 经 预先 为 WebStorm 开发 了 基于 Git、SVN、CVS 等 多 种 团队 协作 开 
发 功能 的 支持 。WebStorm 最 新 版 本 为 6.0， 主 体 界面 如 图 1-6 所 示 。 
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图 1-6 WebStorm 6.0 的 主体 界面 
WebStorm 是 一 款 新 兴 的 Web 开发 工具 , 其 界面 和 使 用 方式 与 传统 的 Eclipse 系列 开发 
工具 具有 较 大 差别 ， 因 此 目前 支持 的 插件 也 比较 少 。 另 外 由 于 官方 并 未 发 布 中 文 版 本 ， 因 
此 在 学 习 和 使 用 方面 具有 诸多 问题 , 并 不 适合 初学 者 和 英文 基础 较 差 的 用 户 。WebStorm 也 
是 一 款 商业 软件 ， 开 发 者 需要 购买 授权 才能 使 用 。 


1.4 着 手 开发 Web 项 目 


在 了 解 Web 开发 项 目 使 用 的 技术 和 工具 后 ， 有 必要 了 解 一 些 Web 项 目的 开发 常识 和 
团队 协作 的 良好 工作 习惯 ， 这 些 经 验 和 技巧 可 以 帮助 开发 者 快速 融入 开发 团队 ， 或 使 项 目 
的 设计 和 实现 具有 更 佳 的 维护 性 和 可 持续 发 展 性 。 


1.4.1 Web 项 目 开 发 模式 


早期 的 Web 开发 者 往往 只 需要 掌握 一 种 后 端 开 发 语言 ， 对 数据 库 具 有 一 定 的 了 解 ， 会 
使 用 HTML 语言 ， 即 可 开发 出 一 个 简单 的 Web 站 点 。 而 今天 的 Web 项 目 越 来 越 大 ， 一 两 
种 开发 语言 和 技术 已 经 远 远 不 能 满足 Web 项 目的 需要 ， 仅 以 前 端 开发 为 例 ， 现 代 的 Web 
开发 需要 采用 的 技术 已 经 越 来 越 多 ， 越 来 越 多 的 开发 者 开始 引入 大 量 第 三 方 框架 以 及 更 多 
先进 的 技术 来 提高 开发 效率 ， 降 低 开 发 成 本 。 
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目前 主流 的 Web 项 目 开 发 模式 主要 有 三 种 ， 即 流 线 式 开 发 、 分 布 式 开发 以 及 更 极端 的 
MVC 开发 。 
1. 流 线 式 开发 
流 线 式 开发 是 最 早 基于 个 人 项 目 开 发 延伸 而 来 的 开发 模式 。 在 这 种 模式 下 ， 一 个 开发 
工作 被 划分 为 多 个 步骤 ,包括 应 用 逻辑 开发 、 界 面 元 素 开发 、 结 构 代 码 开 发 、 项 目测 试 等 。 
通常 情况 下 ， 这 些 步骤 按照 从 抽象 到 具体 化 的 方式 依次 进行 ， 如 图 1-7 所 示 。 


i 


此 体 页 面 样 芭 
(CSS) 


局 部 动态 交互 
元 素 


(Javascript 
和 CSS) 


前 后 端 数据 交 
互 


(Javascript ) 


图 1-7 流 线 式 开发 的 流程 


流 线 式 开 发 更 适合 中 小 型 的 开发 项 目 (例如 中 小 企业 站 点 、 博 客 等 较为 简易 的 Web 项 
目 ), 适用 于 外 包 中 小 型 开发 项 目的 企业 采用 。 在 这 种 开发 模式 中 , 项 目 团队 可 以 按照 并 行 
的 方式 进行 多 线程 开发 ， 每 个 方向 的 开发 者 (Javascript 框架 开发 、 界 面 元 素 开发 和 结构 代 
码 开发 等 ) 分 别 为 不 同 的 项 目 进行 开发 工作 ， 以 实现 最 大 限度 提高 开发 效率 。 

在 这 种 开发 模式 下 ， 前 端 脚本 框架 更 多 地 选择 一 些 快速 的 轻 量 级 DOM 操作 框架 ， 例 
如 jQuery 等 ， 以 提高 开发 效率 。 在 界面 元 素 设计 方面 ， 既 可 以 自行 开发 界面 元 素 ， 也 可 以 
采用 一 些 成 熟 的 界面 元 素 框架 ， 例 如 Bootstrap、jQuery UI、jQuery EazyUI 等 。 


2. 分 布 式 开发 


分 布 式 开发 更 加 强调 开发 过 程 的 模块 化 和 并 行 化 ， 也 更 加 重视 业务 逻辑 代 码 的 开发 。 
tte eis ern ht ta lee rt 些 成 熟 的 UI 框架 来 实 
现 界面 元 素 的 效果 。 以 一 个 内 容 管理 系统 (CMS ) 为 例 ， en 1-8 所 示 。 

分 布 式 开 发 适 全 较为 复杂 的 开发 项 目 《 便 如 门户 网 站 、 搜 索引 区 坛 、 内 容 管 理 系 
统 、OA 在 线 办 公 系 统 等 )， 适 合 专业 的 项 目 团队 长 期 维护 基 一 个 大 中 型 Web 项 目 (日前 绝 
大 多 数 的 大 型 Web 企业 也 都 采取 这 种 形式 )， 快 速 根据 不 断 变化 的 业务 需求 开发 新 的 业务 
模块 ， 扩 张 Web 项 目的 功能 。 在 这 种 开发 模式 下 ， 更 加 强调 项 目的 多 个 子 系统 以 统一 的 标 
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准 进行 并 行 开 发 ， 通 过 大 型 应 用 框架 来 实现 项 目 代码 的 管理 ， 增 强项 目的 扩展 性 。 


账户 系统 


(Javascript) 


权限 系统 


(Javascript ) 


基础 框架 开发 内 容 分 类 管理 界面 元 素 开发 
(Javascript ) 系统 mm (Javascript 和 
(Javascript ) CSS 


内 容 采 集 录入 


系统 
(Javascript) 


其 他 业务 系统 
(Javascript) 


图 1-8 分 布 式 开发 CMS 系统 的 流程 


在 这 种 模式 下 ， 轻 量 级 的 脚本 框架 (jQuery 等 ) 往往 无 法 对 上 万 行 的 业务 逻辑 代码 进 
行 有 效 的 管理 , 绝 大 多 数 开发 团队 更 趋向 于 采用 一 体 化 的 大 型 Web 框架 (例如 ExtJS、YUI 
等 多 功能 全 方位 的 大 型 开发 框架 ), 通过 这 些 大 型 框架 有 效 的 业务 逻辑 管理 功能 和 界面 元 素 
设计 功能 实现 复杂 的 功能 。 

3. MVC 方式 开发 


MVC 是 一 种 由 大 型 应 用 程序 开发 引入 前 端 开发 的 一 种 全 新 设计 模式 和 开发 模式 ， 其 
由 三 个 要 素 组 成 ， 即 模型 (Model)、 视 图 (View) 和 控制 (Controller)。 

MVC 开发 比分 布 式 开发 更 加 强调 模块 化 开发 ， 更 加 强调 业务 轴 辑 的 分 划 、 模 型 和 模 
块 的 设计 ， 通 过 强制 的 分 层 将 业务 逻辑 、 显 示 层 信息 以 及 之 间 的 关系 分 离 出 来 ， 通 过 统一 
的 模块 通信 机 制 相 互 作用 ， 形 成 一 个 整体 。 其 分 层 的 作用 如 下 。 

口 模型 层 (Model) 

模型 层 用 于 封装 与 应 用 程序 的 业务 逻辑 相关 的 数据 以 及 对 数据 的 处 理 方法 。“ 模 型 > 
有 对 数据 直接 访问 的 权力 ， 例 如 对 数据 库 的 访问 。“ 模 型 ”不 依赖 “视图 ”和 “控制 器 ”， 
也 就 是 说 ， 模 型 不 关心 它 会 被 如 何 显示 或 是 操作 。 但 是 模型 中 数据 的 变化 一 般 会 通过 一 种 
刷新 机 制 被 公布 。 为 了 实现 这 种 机 制 ， 那 些 用 于 监视 此 模型 的 视图 必须 事先 在 此 模型 上 注 
册 ， 从 而 视图 可 以 了 解 在 数据 模型 上 发 生 的 改变 。 

在 前 端 开发 方向 ， 模 型 层 主 要 负责 与 后 端 数据 处 理 程序 的 交互 ， 通 过 各 种 数据 操作 指 
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令 控制 后 端的 数据 处 理 程序 获取 数据 ， 以 及 如 何 对 数据 库 进 行 写 入 。 

口 视图 层 (View) 

视图 层 能 够 实现 数据 有 目的 的 显示 。 在 视图 中 一 般 没 有 程序 上 的 罗 辑 。 为 了 实现 视图 
上 的 刷新 功能 ， 视 图 需要 访问 它 监视 的 数据 模型 (Model)， 因 此 应 该 事先 在 被 它 监 视 的 数 
据 那 里 注册 。 

在 前 端 开 发 方向 ， 视 图 层 主要 负责 决定 哪些 数据 在 页 面 中 显示 。 当 用 户 交 互 操作 提出 
需求 后 ， 视 图 层 通过 控制 器 向 模型 层 发 送 数据 请 求 ， 实 现 快速 的 用 户 交互 。 

口 控制 器 (Controller) 

控制 器 起 到 不 同 层面 间 的 组 织 作 用 , 用 于 控制 应 用 程序 的 流程 , 处理 事件 并 作出 响应 。 
“事件 ”包括 用 户 的 行为 和 数据 模型 上 的 改变 。 

在 前 端 开发 方向 ， 控 制 器 的 作用 就 是 做 视图 层 和 模型 层 的 连接 工具 ， 为 各 种 页 面 的 交 
互 行为 传递 数据 需求 。 

以 上 三 个 分 层 强 制 将 所 有 前 端 代码 分 割 开 来 ， 通 过 指定 的 通信 方式 相互 传递 数据 。 基 
于 MVC 的 前 端 开发 方式 ， 其 开发 的 程序 与 后 端 程序 的 关系 如 图 1-9 所 示 。 


反馈 请 求 [到 


控制 器 ”对 
请 求 数据 (Controller) 提交 请 求 读 写 数据 Databas 
反馈 数据 ti 


图 1-9 MVC 开发 模式 的 前 后 端 分 层 结构 关系 


基于 MVC 模式 的 前 端 开发 将 传统 的 后 端 处 理 业务 逻辑 、 前 端 处 理 显 示 风 辑 的 关系 修 
改 为 后 端 仅 根据 前 端 指令 提供 数据 ， 所 有 业务 逻辑 都 放 到 前 端 来 处 理 ， 实 现 富 客户 端的 程 
序 架 构 。 这 种 方式 的 好 处 在 于 业务 逻辑 和 运算 都 由 终端 用 户 的 计算 机 来 负责 ， 降 低 了 服务 
器 的 负载 ， 节 省 了 项 目 运 维 的 成 本 。 

除 此 之 外 ， 由 于 其 将 大 量 业 务 逻辑 用 前 端 开 发 ， 因 此 后 端的 压力 逐渐 降低 ， 后 端 重 构 
的 成 本 也 会 相应 降低 。 在 前 端 开发 语言 不 变 的 情况 下 ， 可 以 方便 地 移植 后 端 代码 〈 例 如 将 
PHP 后 端 移植 为 JSP 等 )， 降 低 了 后 端 程序 移植 的 风险 。 

另外 ， 这 种 模式 也 可 以 促使 后 端 开发 团队 将 精力 更 多 地 投入 到 如 何 提高 系统 项 目的 运 
维 效率 ， 提 高 数据 库 效率 的 方向 上 来 。 

前 端 MVC 开发 模式 是 近年 来 新 兴 的 开发 模式 ， 目 前 尚 处 于 前 沿 研究 。 基 于 风险 控制 
的 原因 ， 目 前 并 未 有 大 型 的 Web 项 目 采 用 这 种 开发 方式 ， 应 用 这 种 开发 模式 的 仅 为 实验 性 
质 的 中 小 型 Web 项 目 。 

在 这 种 模式 下 ， 开 发 者 更 热衷 于 采用 一 种 现 有 的 MVC 框架 ， 然 后 将 多 种 前 端 框架 结 
合 使 用 以 实现 各 分 层 的 功能 。 例 如 ， 以 jQuery 框架 为 基础 ， 采 用 Emberjs 或 Angularjs 全 
面 管理 MVC 结构 ， 然 后 再 使 用 jQuery EazyUI、Bootstrap、jQuery UI 等 UI 框架 实现 视图 
层 的 显示 。 


1.4.2 ”项目 分 工 与 协作 


早期 的 Web 项 目 多 是 中 小 型 项 目 ， 由 于 采用 的 技术 并 不 复杂 ， 也 对 用 户 体验 、 程 序 执 
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行 效率 、 维 护 性 等 要 求 较 低 ， 因 此 多 为 一 个 程序 员 包 打 天 下 ， 采 用 各 种 “ha-ck” 式 的 方式 
解决 问题 〈 即 一 切 以 项 目 实现 为 目的 ， 不 考虑 技术 可 扩展 性 和 维护 性 )。 

随 着 Web 技术 的 发 展 ， 竞 争 日 趋 激烈 ， 现 在 Web 项 目 往 往 对 用 户 体验 的 要 求 较 高 ， 
需要 一 个 团队 不 断 地 更 新 和 维护 项 目 ， 增 加 新 的 功能 ， 提 升 用 户 体验 ， 改 进项 目 代 码 ， 因 
此 ， 需 要 采用 更 多 更 复杂 的 技术 实现 项 目 开发 。 就 以 前 端 开发 而 言 ， 各 种 框架 、 工 具 越 来 
越 专业 化 ， 一 个 程序 员 实现 整个 项 目 开发 的 模式 就 技术 上 而 言 越 来 越 困 难 。 此 时 ， 越 来 越 
多 的 企业 开始 从 后 端 开 发 的 经 验 着 手 ， 引 入 前 端 团 队 开发 ， 通 过 开发 团队 的 分 工 协作 提高 
项 目 开 发 的 效率 。 

以 分 布 式 开发 为 例 ，Web 前 端 开发 团队 通常 由 5 一 7 人 组 成 ， 分 别 担任 不 同 的 角色 ， 
如 图 1-10 所 示 。 


目 组 长 
(需求 分 析 , 项 目 协调 , 任务 分 配 ) 


分 发 任务 分 发 任务 六 | 
面 设计 序 开发 交互 开发 


( 设 让 训 外 贡 (元 志和 必 ) (uw 田 加 四 开发) (和 ) (视图 效果 开发 ) 


图 1-10 典型 的 前 端 Web 开发 团队 结构 


前 端 Web 开发 团队 通常 包括 四 种 角色 ， 即 项 目 组 长 (PM)、 界 面 设计 (UID)、 程 序 
开发 (PD) 和 交互 开发 (ID)。 角 色 作用 如 下 。 

口 项 目 组 长 (PM) 

项 目 组 长 是 整个 项 目 团 队 的 首脑 ， 其 责任 是 审核 项 目 需求 ， 与 后 端 开发 团队 交流 ， 制 
订 统 一 的 开发 接口 ， 协 调整 体 项 目的 工作 ， 并 分 配 开发 任务 ， 制 订 开 发 周期 。 

口 界面 设计 (UID ) 

界面 设计 主要 负责 项 目 产品 的 外 观 、 显 示 效 果 等 ， 其 通常 需要 使 用 各 种 平面 设计 软件 
(例如 Adobe Photoshop、Adobe Fireworks 等 ) 制作 Web 项 目 整体 的 效果 图 、 各 种 界面 元 素 
的 样式 ， 除 此 之 外 ， 可 能 还 会 负责 部 分 CSS 样式 表 的 编号， 辅助 交 互 开 发 设计 各 种 交互 
效果 。 

口 程序 开发 (PD ) 

程序 开发 在 分 布 式 开发 模式 下 ， 主 要 负责 项 目的 底层 框架 开发 、 业 务 罗 辑 开发 ， 负 责 
对 后 端 团 队 提供 的 数据 进行 运算 、 筛 选 ， 以 高 效 的 数据 为 整个 项 目 开 发 团队 服务 。 在 MVC 
模式 开发 下 负责 模型 层 和 控制 器 的 编写 ， 制 订 前 端 数 据 传输 的 标准 等 。 

口 交互 开发 (ID ) 

交互 开发 在 分 布 式 开发 模式 下 , 主要 负责 项 目的 结构 代码 编写 、 各 种 显示 效果 的 开发 ， 
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根据 程序 开发 者 提供 的 数据 编写 前 端 显 示 代 码 和 交互 特效 。 在 MVC 模式 开发 下 负责 视图 
层 部 分 的 编写 ， 与 界面 设计 合作 将 最 佳 的 显示 效果 和 交互 体验 提供 给 用 户 。 


1.4.3 项 目 代码 规范 


程序 的 代码 是 规范 和 格式 化 的 语言 ， 相 比 自然 语言 而 言 ， 代 码 往往 比较 难以 判读 。 万 
其 前 端 开发 所 使 用 的 Javascript 脚本 语言 本 身 就 由 于 语法 的 灵活 和 形式 的 多 样 , 被 称 作 “ 最 
容易 被 误解 的 编程 语言 ”。 

在 一 个 项 目 团队 中 ， 如 果 每 个 成 员 都 以 自我 的 形式 编写 代码 ， 那 么 其 开发 的 代码 往往 
只 有 该 成 员 自 己 能 够 阅读 和 维护 ， 当 成 员 变动 或 其 他 成 员 需 要 维护 该 成 员 的 代码 时 ， 这 些 
个 性 化 的 代码 往往 会 影响 整个 项 目 维护 的 效率 。 

因此 ， 项 目 团队 的 协作 开发 需要 梳理 整个 项 目 团队 的 代码 书写 风格 和 开发 规范 ， 从 而 
保持 代码 的 一 致 性 , 使 得 项 目 开 发 团队 所 有 成 员 都 能 够 判读 和 维护 其 他 成 员 的 代码 。 此 时 ， 
就 需要 制订 一 个 统一 的 代码 书写 格式 规范 ， 所 有 项 目 团队 成 员 都 应 该 以 这 一 规范 来 书写 代 
码 ， 并 按照 指定 的 要 求 编写 注释 。 


1. 基本 书写 格式 

基本 书写 格式 是 指 进行 整体 代码 开发 时 需要 遵循 的 规约 ， 它 定义 了 各 种 语素 级 别 的 代 
码 书写 方式 。 

口 代码 缩 进 


代码 缩 进 的 作用 是 使 多 行 不 同 结构 的 代码 更 加 清晰 和 直观 。 常 用 的 代码 缩 进 包括 空格 
缩 进 和 Tab 缩 进 两 种 。 由 于 Tab 符号 在 不 同 的 开发 工具 中 显示 长 度 可 能 有 所 区 别 ， 因 此 建 
议 采 用 空格 缩 进 的 缩 进 方式 ， 以 防止 不 同 开发 工具 浏览 代码 时 产生 代码 字符 形变 的 问题 。 

代码 缩 进 的 数量 也 应 在 整个 开发 团队 中 统一 ， 例 如 Yahoo 的 前 端 开发 团队 就 统一 使 用 
4 个 空格 作为 代码 缩 进 的 标准 。 

口 行 长 

行 长 是 指 每 行 代码 包含 的 字符 数量 。 通 常情 况 下 开发 工具 的 窗口 能 够 显示 的 字符 数量 
是 有 限 的 ， 过 长 的 行 会 导致 开发 工具 窗口 出 现 横向 的 滚动 条 ， 导 致 开发 者 浏览 代码 和 代码 
对 比 时 必须 随时 横向 滚动 窗口 ， 降 低 浏览 的 效率 。 

通常 情况 下 ， 绝 大 多 数 的 开发 团队 都 会 根据 自身 硬件 设备 支持 的 屏幕 分 辩 率 制订 一 个 
统一 的 行 长 标准 ， 提 高 代码 浏览 的 效率 。 在 此 推荐 每 行 代码 长 度 不 超过 80 个 字符 , 在 绝 大 
多 数 宽屏 显示 器 下 可 以 同时 展示 两 个 文档 窗口 而 不 出 现 横向 滚动 条 。 

口 空 行 

室 行 在 代码 结构 中 的 作用 是 分 隔 不 同 语义 的 代码 块 ， 将 不 同类 型 的 代码 块 有 效 地 分 隔 
开 来 。 在 此 强烈 建议 在 语句 块 〈 包 括 类 、 函 数 、 命 名 空间 、 分 支 语句 和 迭代 语句 等 ) 之 前 
都 应 保留 一 个 空 行 ， 在 这 些 语句 块 内 部 的 首 行 也 应 保持 为 空 。 除 此 之 外 ， 在 注释 之 前 也 应 
保留 一 个 空 行 。 


2. 命名 法 则 
命名 法 则 是 指 在 创建 类 、 对 象 、 命 名 空间 、 函 数 、 方 法 、 属 性 和 变量 等 实体 时 ， 定 义 
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这 些 实体 名 称 的 法 则 。 命 名 法 则 可 以 规范 整个 项 目 开 发 时 所 有 实体 的 命名 ， 提 高 开发 团队 
书写 代码 的 一 致 性 。 使 用 统一 的 命名 法 则 ， 可 以 提高 团队 沟通 的 效率 ， 帮 助 团 队 成 员 快 速 
阅读 代码 。 

常用 的 命名 法 则 分 为 三 种 ， 即 大 驼峰 命名 法 、 小 驼峰 命名 法 和 匈牙利 命名 法 。 

口 大 驼峰 命名 法 

大 驼峰 命名 法 是 指 将 多 个 单词 拼接 在 一 起 ， 每 个 单词 的 首 字母 大 写 ， 其 他 字母 小 写 的 
命名 法 则 。 例如， 定义 用 户 名 的 变量 ， 如 采用 大 驼峰 命名 法 ， 则 可 以 将 其 命名 为 UserName 
等 。 大 驼峰 命名 法 则 通常 用 于 构造 函数 、 全 局 类 等 。 

口 小 驼峰 命名 法 

小 驼峰 命名 法 与 大 驼峰 命名 法 的 区 别 在 于 ， 在 多 个 单词 拼接 时 ， 第 一 个 单词 的 首 字母 
小 写 ， 其 他 单词 的 首 字 母 大 写 。 例 如 ， 定 义 用 户 密码 ， 如 采用 小 驼峰 命名 法 ， 可 以 将 其 命 
名 为 userPassword 等 。 小 驼峰 命名 法 通常 用 于 定义 命名 空间 、 局 部 类 、 对 象 、 对 象 的 属性 
和 方法 等 。 

口 勾 牙 利 命 名 法 

匈牙利 命名 法 同样 基于 若干 单词 的 拼接 ， 每 个 单词 首 字母 必须 大 写 〈 类 似 大 驼峰 命名 
法 )， 但 是 需要 以 小 写 的 数据 类 型 作为 整个 命名 的 前 级。 以 Javascript 为 例 ， 其 各 种 变量 的 
前 级 如 表 1-4 所 示 。 


表 1-4 Javascript 的 匈牙利 命名 法 前 级 


数据 类 型 英文 名 称 前 缀 数据 类 型 英文 名 称 前 组 
整数 integer int 或 i 浮 点 数 float fl 

布尔 值 boolean bl 字符 串 string str 或 s 
空 值 null nul 未 定义 值 undefined und 或 u 
对 象 object obj 数组 array ar 

日 期 date dt 


例如 ， 定 义 一 个 用 户 的 各 种 信息 ， 如 使 用 匈牙利 命名 法 ， 则 可 以 用 strName 定义 用 户 
姓名 ，intAge 定义 年 龄 等 。 

匈牙利 命名 法 是 一 种 饱 受 争议 的 命名 法 则 ， 一 些 开发 者 认为 此 种 命名 法 则 没有 必要 ， 
而 另 一 些 开 发 者 则 坚持 认为 声明 变量 时 采用 匈牙利 命名 法 可 以 提高 代码 的 可 读 性 ， 尤 其 在 
装 箱 和 拆 箱 〈 数 据 类 型 相互 转换 ) 时 ， 使 用 匈牙利 命名 法 可 以 防止 转换 错误 。 作 为 折衷 的 
办 法 ， 可 以 在 为 局 部 变量 命名 时 使 用 此 命名 法 则 。 

除了 以 上 三 种 命名 法 则 外 ， 在 处 理 全 局 常量 或 一 些 特殊 的 定义 值 时 ， 应 该 使 用 另外 一 
种 命名 法 则 将 其 与 普通 的 命名 空间 、 类 、 对 象 、 属 性 和 方法 区 分 开 来 ， 这 种 命名 法 则 即 常 
量 命 名 法 则 (或 宏 命 名 法 则 )。 常量 命名 法 则 并 非 成 文 的 约定 , 而 是 一 些 开 发 者 的 特殊 习惯 ， 
这 种 习惯 对 项 目 代 码 命名 极 有 帮助 ， 可 以 对 命名 的 元 素 进行 强调 ， 突 出 其 与 其 他 实体 的 
区 别 。 

常量 命名 法 则 的 书写 方式 为 将 名 称 的 所 有 单词 大 写 ， 单 词 和 单词 之 间 以 下 划 线 隔 开 
例如 ， 定 义 一 个 服务 器 URL 地 址 ， 可 以 将 其 命名 为 SEVER_URL 等 。 

团队 统一 使 用 规定 好 的 命名 法 则 可 以 提升 代码 的 统一 规范 性 ， 有 效 地 避免 各 种 五 花 八 
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门 的 实体 名 称 影响 团队 成 员 对 代码 的 判读 。 除 了 遵守 命名 法 则 外 ， 在 命名 方法 或 函数 时 ， 
建议 采用 动 宾 词 组 来 明确 地 表示 这 些 方法 或 函数 的 语义 ， 在 此 列 出 了 一 些 常用 的 方法 和 函 
数 前 级 ， 如 表 1-5 所 示 。 
表 1-5 常用 的 方法 或 函数 的 前 缀 及 其 语义 


前 缀 ”语义 前 缀 ”语义 
can 能 否 处 理 或 运算 ， 返 回 布尔 值 has 是 否 包含 或 存在 ， 返 回 布尔 值 
is 是 否 从 属于 或 归于 某 个 类 型 , 返回 布尔 值 ”get 获取 数据 ， 返 回 对 象 或 普通 变量 
set 设置 或 写 入 某 值 ， 用 于 保存 数据 create ”创建 对 象 或 界面 元 素 , 返回 对 象 或 字符 串 
move ”移动 界面 元 素 remove ”删除 某 个 对 象 或 界面 元 素 
delete ”彻底 删除 某 个 对 象 或 界面 元 素 add 增加 数据 或 集合 的 元 素 
convert ”数据 类 型 或 界面 元 素 的 转换 switch ”切换 工作 流 
show ”显示 界面 元 素 hide 隐藏 界面 元 素 
dispose ”处 理 数据 edit 编辑 数据 或 集合 的 元 素 
3. 变量 


程序 的 任务 就 是 对 各 种 数据 进行 判断 和 处 理 ， 这 些 数据 通常 都 是 占据 在 内 存 中 指定 地 
址 的 值 ， 即 变量 。 使 用 变量 时 同样 需要 遵循 制订 的 规范 ， 防 止 代码 被 误 读 的 同时 ， 也 防止 
程序 出 现 逻 辑 错 误 。 

口 变量 的 默认 值 

在 创建 一 个 变量 时 ， 应 该 为 变量 添加 一 个 默认 值 ， 以 防止 之 后 引用 该 变量 时 由 于 该 变 
量 没有 实际 的 值 而 导致 的 错误 。 同 时 ， 由 于 Javascript 是 一 种 弱 类 型 编程 语言 (没有 强制 
变量 的 数据 类 型 )， 因 此 为 变量 赋予 一 个 默认 值 ， 可 以 有 效 地 标定 该 变量 的 数据 类 型 ， 防 止 
不 可 控 的 装 箱 拆 箱 操作 。 常 见 的 各 种 数据 类 型 的 变量 默认 值 如 表 1-6 所 示 。 


表 1-6 各 数据 类 型 的 变量 默认 值 


数据 类 型 ” 默认 值 数据 类 型 默认 值 
字符 串 数字 (包括 整数 和 浮 点 ) 0 

布尔 值 false 空 值 null 

数组 0 对 象 null 

日 期 new Date () 正则 表达 式 /Ds\S]*$/ 


口 单 语句 单 变量 

在 创建 变量 时 ， 请 尽量 为 每 一 个 变量 书写 一 个 独立 的 var 语句 。 昌 然 一 个 var 语句 创 
建 多 个 变量 显得 更 有 效率 ， 但 是 基于 创建 每 个 变量 都 应 该 有 独立 的 注释 (帮助 其 他 开发 者 
了 解 该 变量 的 作用 ) 的 原则 ， 显 然 只 有 每 个 变量 都 独占 一 个 var 语句 更 好 一 些 。 

口 原始 包装 类 型 的 创建 

原始 包装 类 型 即 Javascript 最 基本 的 三 种 数据 类 型 :字符 串 (String)、 布 尔 值 (Boolean)、 
整数 和 浮 点 数 (Number)。 在 创建 这 些 类 型 的 数据 时 ， 由 于 这 三 种 包装 类 型 的 类 并 不 存在 
静态 方法 和 静态 属性 ， 因 此 在 以 new 运算 符 调用 其 构造 函数 时 很 容易 产生 BUG， 如 下 所 示 。 

Var strMyString = new String ( 'text"' ) ; 

Var intMyNumber = new Number ( 15 ) ; 
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var blMyBoolean = new Boolean ( true ) : 


以 上 的 代码 在 Javascript 语法 规范 中 是 完全 正确 的 , 但 是 从 开发 和 避免 逻辑 BUG 的 角 
度 而 言 是 应 尽量 避免 的 。 在 创建 此 类 对 象 时 直接 赋予 默认 值 或 自 定义 值 即 可 ， 如 下 所 示 。 
var strMyString = "text' ; 


var intMyNumber = 15 ; 


Var blMyBoolean = true ; 


4. 注释 


注释 的 作用 是 为 代码 提供 自然 语言 的 解释 。 在 开发 工作 中 ， 为 代码 添加 注释 是 一 项 重 
要 的 工作 。 使 用 注释 可 以 帮助 项 目 团队 的 其 他 成 员 快速 阅读 各 种 语义 繁杂 、 难 以 理解 的 代 
码 。 开 发 团队 的 注释 风格 也 应 该 统一 ， 以 便 所 有 团队 成 员 快速 阅读 代码 ， 同 时 统一 而 有 效 
的 注释 可 以 帮助 一 些 项 目 代 码 文档 生成 工具 快速 生成 代码 文档 。 

Javascript 的 注释 分 为 两 种 ， 一 种 为 单行 注释 ， 一 种 为 多 行 注释 。 

单行 注释 多 用 于 注释 语句 块 中 某 一 条 语句 。 通 常情 况 下 ， 对 于 各 种 流程 语句 〈 分 支流 
阻 、 和 迭代 流程 等 ) 的 注释 可 采用 单行 注释 ， 将 注释 书写 在 语句 的 上 方 。 例 如 ， 判 断 一 个 数 
组 arrTest 的 长 度 是 否 等 于 0， 代码 和 注释 如 下 所 示 。 

// 判 断 数组 arrTest 的 长 度 是 否 等 于 0 

if ( 0 === arrTest.length ) 

{ 


// 代 码 块 

} 

而 多 行 注 释 则 主要 用 于 注释 语句 块 、 文 档 等 , 为 项 目 完成 后 的 文档 生成 工具 提供 内 容 。 
大 多 数 大 型 项 目的 多 行 注 释 都 采用 了 Google 的 JSDoc 标准 , 以 支持 Google 开发 的 JS 文档 
生成 工具 。 在 定义 各 种 实体 时 ， 其 注释 格式 如 下 所 示 。 

口 文档 注释 

文档 注释 的 作用 是 声明 整个 Javascript 脚 本 代码 文档 的 作用 等 信息 , 其 书写 于 Javascript 
脚本 文档 的 头 部 ， 格 式 如 下 所 示 。 


/** 

@fileOverview 文档 描述 
eversion 文档 版 本 

*/ 


其 中 ，fileOverview 关键 字 定义 文档 的 描述 信息 ，version 关键 字 定 义 文档 的 版 本 。 

口 类 的 注释 

Javascript 本 身 并 不 存在 类 的 概念 ， 但 是 支持 通过 函数 的 封装 模拟 其 他 编程 语言 的 类 ， 
因此 在 很 多 项 目 中 ,都 会 通过 函数 来 创建 所 谓 的 “ 自 定义 类 ”,， 实现 其 他 编程 语言 中 类 的 功 
能 。 类 的 注释 用 于 为 自 定义 类 (包括 全 局 类 、 局 部 类 和 子 类 ) 提供 描述 信息 ， 其 格式 如 下 
所 示 。 
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/** 

@class User 

Qconstructs 

@param {String} name 姓名 

Q@param {String} password 密码 

eparam {Date} birthday 出 生日 期 

@augments System.Object 

Q@exports User as System.Object 

vj 

var User = function ( name , password , birthday ) { 
// 构 造 函 数 代码 

3 


其 中 ，class 关键 字 定义 类 的 名 称 ，constructs 关键 字 声 明 以 下 代码 是 一 个 构造 函数 ， 
param 关键 字 定义 类 的 构造 函数 参数 ，augments 定义 类 的 继承 关系 ，exports 关键 字 定 义 类 
的 派生 关系 。 

口 命名 空间 注释 

Javascript 不 存在 命名 空间 的 概念 ， 但 是 在 一 些 大 型 Web 项 目的 开发 中 ， 需 要 对 类 和 
对 象 进行 划分 ， 防 止 出 现 命名 污染 ， 此 时 即 可 通过 为 类 定义 自 定义 方法 ， 返 回 一 个 特殊 对 
象 的 方式 实现 类 似 命名 空间 的 功能 。 例如， 为 一 个 名 为 TestClass 的 类 定义 命名 空间 ， 代 码 
如 下 。 


Var TestClass = { 
namespace : function (ns) { 


var parts = ns.split ( '.' ) ; 
var object = this ; 

Var I; 

var len; 


for ( i=0 ,， len = parts.length ; I < len ; i++ ) 
if ( !object [ parts [I] ]) 
{ 
object [ parts [I]]={}; 


} 
object = object [ parts [I]]; 


return object; 
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在 完成 以 上 方法 的 编写 后 ， 即 可 通过 该 类 的 namespace 方法 声明 命名 空间 ， 并 编写 注 
释 ， 代 码 如 下 。 

/** 

@namespace 

@description 测试 命名 空间 

*/ 

var TestClass.namespace ( testNamespace ) ; 

其 中 , namespace 关键 字 声明 以 下 代码 是 一 个 命名 空间 ，description 关键 字 定义 该 命名 
空间 的 描述 。 


口 常量 注释 
Javascript 并 不 存在 常量 这 一 概念 ， 该 概念 是 由 其 他 编程 语言 引入 的 。Javascript 的 常 


量 其 实 是 一 种 伪 常 量 ， 其 仍然 可 以 被 修改 。 通 常情 况 下 ， 这 些 常量 会 被 用 于 系统 某 些 固定 
的 配置 信息 ， 或 一 些 常数 〈 例 如 PI 等 )。 定 义 常量 时 同样 需要 编写 注释 以 帮助 团队 其 他 成 
员 了 解 该 常量 的 作用 ， 代 码 如 下 所 示 。 


/** 

@field 

@constrant 

@type Number 
edescription 圆周 率 的 常数 
二 

var PI = 3.1415926535; 


其 中 ，field 关键 字 定 义 该 值 是 一 个 直接 量 〈 非 函数 )，constrant 表示 该 值 是 一 个 常量 ， 


type 关键 字 定义 该 值 的 数据 类 型 ，description 定义 该 值 的 描述 。 


用 。 


口 静态 方法 注释 
静态 方法 是 类 中 的 一 种 特殊 方法 ， 其 特点 是 不 需要 对 类 进行 实例 化 ， 直 接 由 类 名 来 调 
静态 方法 只 能 调用 静态 属性 。 定 义 一 个 静态 方法 代码 如 下 所 示 。 


/** 

@static 

@param {Object} value 值 

@return {Int32} 

Q@description 转换 为 Int32 

@example 

var n= 0; 

Var n2 = System.Convert.ToInt32(n) ; 
*/ 


System.Convert.ToInt32 = function(value) { 


} 
其 中 ，static 关键 字 定 义 该 方法 是 一 个 静态 方法 ，param 关键 字 定 义 该 方法 的 参数 数据 


第 1 章 ”Web 开发 基础 25 


类 型 和 名 称 以 及 参数 的 中 文 描述 , retumn 关键 字 定 义 该 方法 的 返回 值 ，description 关键 字 定 
义 该 方法 的 描述 及 作用 ，example 关键 字 定义 该 方法 的 使 用 示例 。 

口 实例 方法 注释 

实例 方法 与 静态 方法 相反 ， 其 指 必 须 从 属于 某 一 个 类 ， 当 且 仅 当 该 类 被 实例 化 为 一 个 
具体 的 对 象 后 才能 调用 的 方法 。 定 义 一 个 实例 方法 代码 如 下 所 示 。 

/** 

@public 

eparam {String} input 输入 

Qreturn {Int32} 

edescription 判断 输入 字符 在 当前 字符 中 的 起 始 索引 

Q@example 

var str = new System.String( “hello, world” ); 

var index = str.indexOf (world); 


本 
System.String.prototype.indexOf = function(input) { 


} 


实例 方法 通常 具有 不 同 的 访问 级 别 ， 如 果 不 限制 其 他 类 和 对 象 访问 ， 可 使 用 public 关 
键 字 进 行 定义 ， 如 果 禁 止 其 他 类 和 对 象 访问 ， 则 可 使 用 private 关键 字 进 行 定义 。 

口 事件 注释 

事件 用 于 为 某 些 对 象 绑 定 一 个 交互 处 理 的 过 程 ， 其 通常 是 由 一 个 方法 实现 的 。 与 普通 
静态 方法 不 同 的 是 , 事件 需要 通过 name 关键 字 定 义 事件 的 名 称 ， 再 通过 event 关键 字 标 识 
其 是 一 个 事件 。 事 件 其 他 方面 与 普通 的 实例 方法 并 无 区 别 ， 在 此 不 再 獒 述 。 

口 忽略 注释 

对 于 一 些 不 需要 文档 生成 工具 生成 文档 的 代码 ， 开 发 者 可 以 通过 ignore 关键 字 将 其 忽 
略 ， 代 码 如 下 所 示 。 


/** @ignore */ 


5. 函数 或 方法 


书写 函数 或 方法 时 ， 除 了 需要 注意 在 函数 或 方法 之 前 添加 空 行 、 内 部 首 行 留 空 外 ， 还 
需要 注意 函数 的 参数 书写 以 及 大 括号 的 位 置 。 一 些 初 学 者 往往 习惯 将 函数 或 方法 的 大 括号 
独占 一 行 ， 并 在 使 用 retum 返回 对 象 时 也 将 对 象 的 大 括号 独占 一 行 ， 代 码 如 下 所 示 。 


function getData() 
{ 


return 


4 
title : 'DataTitle', 


author : "Me' 


26 高 效 Web 前 端 开发 之 路 一 一 YUI 3.15 


在 上 面 的 代码 中 ，getData0 函 数 的 起 始 大 括号 独占 一 行 ， 且 retum 语句 的 返回 值 大 括 
号 也 独占 一 行 ， 在 这 种 情况 下 ， 一 些 Web 浏览 器 往往 会 自作 主张 强制 为 函数 语句 末尾 和 
retum 语句 末尾 添加 一 个 行 结尾 符号 “;” 从 而 造成 代码 语法 错误 ， 如 下 所 示 。 

// 一 些 Web 浏览 器 可 能 会 为 下 一 行 自动 在 行 末 添加 分 号 

function getData() ; 

{ 


// 一 些 Web 浏览 器 可 能 会 为 下 一 行 自动 在 行 末 添加 分 号 
return 


{ 
title : 'DataTitle', 
author : "Me' 


} 


因此 ， 在 实际 开发 中 应 尽量 避免 以 上 这 种 写法 ， 而 应 采用 更 加 安全 的 书写 方式 将 函 
数 以 及 retum 语句 返回 的 对 象 等 语句 块 的 大 括号 紧 跟 函数 主体 和 return 语句 来 书写 ， 代 码 
如 下 所 示 。 


function getData(){ 


return { 
title : 'DataTitle', 
author : "Me' 


如 果 函 数 或 方法 在 声明 时 需要 加 入 大 量 的 参数 ， 且 整个 函数 的 语句 超过 了 行 长 80 的 
限制 时 ， 就 需要 对 函数 的 参数 进行 拆 分 书写 。 在 拆 分 函数 参数 时 需要 注意 换行 应 在 函数 参 
数 的 逗号 “,” 之 后 进行 ， 且 换行 后 的 行 要 比 函 数 function 语句 所 在 的 行 多 缩 进 一 次 。 

通常 拆 分 的 方式 有 两 种 ， 即 C 风格 和 Java 风格 。 其 中 ，C 风格 的 特点 是 强制 对 函数 的 
所 有 参数 都 换行 ， 无 论 函 数 行 长 是 否 超过 80， 每 个 参数 都 必须 独占 一 行 ; Java 风格 则 是 仅 
当 行 长 超过 80 后 才 进行 换行 ， 否 则 不 换行 。 在 换行 时 每 行 应 尽量 在 行 长 80 的 限度 内 书写 
更 多 的 参数 。 

例如 ， 在 下 面 的 代码 中 ， 就 分 别 采 用 了 C 风格 和 Java 风格 对 一 个 相同 的 函数 = 参数 进 
行 了 换行 ， 如 下 所 示 。 


// C 风 格 


function MyTestFunction ( 


myfunctioname ， 


functionauthor ， 
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createdate ，, 
modifydate ， 
updatedate ， 
testdate ， 
acceptdate ， 
from ， 


baseeditor ) { 


} 


// Java 风格 
function MyTestFunction ( myfunctioname , functionauthor , createdate ， 
modifydate , updatedate , testdate , acceptdate , from , baseeditor ) 


以 上 两 种 书写 方式 各 有 各 的 优点 。C 风格 的 书写 更 方便 对 每 一 个 函数 参数 进行 注释 ， 
但 是 在 Javascript 这 种 行 解析 的 脚本 语言 中 可 能 会 造成 解析 效率 低下 ; Java 风格 虽然 注释 
稍微 麻烦 ， 但 是 加 载 效率 更 高 。 因 此 在 实际 开发 中 , 开发 团队 可 以 自由 选择 一 种 注释 方式 。 
笔者 更 推荐 使 用 Java 风格 的 方式 。 调 用 函数 时 为 函数 添加 参数 的 书写 方式 与 创建 函数 类 
似 ， 在 此 不 再 袭 述 。 

6. 语句 

语句 是 代码 执行 的 主体 ， 语 句 的 书写 格式 应 该 清晰 明了 ， 划 分 明确 ， 才 能 帮助 后 续 的 
代码 维护 者 更 快 更 高 效 地 理解 语句 。 在 此 简要 介绍 4 种 常用 的 语句 书写 格式 和 注意 事项 。 

口 这 系列 语句 

让 系列 语句 包含 让. 语句、 让..else... 语 句 和 计 ..else f..else 语句 三 种 主要 的 形式 。 在 书 
写 直 系列 语句 时 , 应 在 条 件 的 括号 两 侧 添加 空格 , 同时 为 了 防止 Web 浏览 器 自动 在 语句 末 
尾 添加 分 号 “;”， 应 将 语句 的 大 括号 紧 跟 语句 末尾 书写 ， 代 码 如 下 所 示 。 

if ( 1 === testValue ) { 

alert ( testValue ) ; 


. 


if..else... 语 句 和 if..else if...else 语句 的 书写 方式 与 下 语句 类 似 。 建 议 将 else、else 让 等 
关键 字 也 独行 处 理 ， 使 得 代码 结构 更 松散 便于 阅读 ， 代 码 如 下 所 示 。 


if ( 1 === testValue ) { 
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} 
slse 1if ( 2 === tostVYalue } 1{ 


在 语句 体内 首 行 空 行 是 一 个 良好 的 习惯 。 无 论 是 在 书写 函数 、 方 法 、 类 、 对 象 ， 还 是 
各 种 语句 时 ， 都 应 该 将 首 行 空 出 来 。 空 出 来 的 一 行 并 不 会 影响 文件 的 下 载 ， 也 不 会 影响 代 
码 执行 的 效率 ， 只 会 使 后 续 的 维护 者 更 方便 地 阅读 代码 。 

在 书写 站 系列 语句 的 条 件 时 ， 如 果 条 件 的 表达 式 长 度 超过 了 行 长 80 的 限制 ， 开 发 者 
可 以 根据 条 件 表达 式 中 的 届 辑 运算 符 进行 分 制 ， 在 逻辑 运算 符 之 后 强制 换行 ， 并 对 新 行 的 
条 件 表 达 式 增加 一 次 缩 进 。 具 体 的 缩 进 方式 与 函数 参数 类 似 ， 在 此 不 再 袭 述 。 

口 switch 语句 

switch 语句 的 作用 是 判断 一 个 变量 可 能 出 现 的 多 种 值 ， 根 据 不 同 的 值 来 决定 执行 哪 一 
段 代 码 ， 其 书写 格式 在 不 同 的 开发 框架 和 编程 规范 中 区 别 较 大 ， 尤 其 break 语句 的 缩 进 方 
式 ， 常 见 的 就 有 Java 风格 (case 和 default 语句 缩 进 一 次 ，break 语句 缩 进 两 次 ) 和 Dojo 
风格 ( 仅 break 语句 缩 进 一 次 )。 有 具体 选择 哪 一 种 风格 或 自 定 义 风格 完全 可 以 由 项 目 组 决定 ， 
但 是 强烈 建议 每 一 个 break 语句 之 后 要 空 一 行 ， 这 样 代码 看 起 来 更 加 整洁 和 清晰 ， 如 下 
所 示 。 


switch ( testValue ) { 
case "First" 


// 语 句 …… ; 
break ; 


case "Second' : 
// 语 句 …… ; 
break ; 


case 'third' : 


// 语 句 ……* ; 
break; 
default: 

// 语 句 ee ; 


} 


在 书写 switch 语句 时 , 无 论 如 何 请 勿 省 略 default,， 否则 一 旦 所 有 case 语句 的 条 件 都 不 
符合 时 ， 该 语句 就 会 被 跳 过 。 在 异常 处 理 中 〈 绝 大 多 数 switch 语句 都 被 用 于 异常 处 理 ) 意 
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味 着 有 些 未 知 的 异常 不 会 被 暴露 出 来 。 考 虑 所 有 分 支 可 能 出 现 的 情况 ， 封 闭 所 有 可 能 遗漏 
的 分 支 是 一 种 良好 而 严谨 的 开发 习惯 。 

在 语法 上 ，case 语句 可 以 不 经 break、retum 或 throw 等 语句 结束 而 连续 执行 ， 但 是 在 
实际 开发 中 ， 建 议 所 有 的 case 语句 《除非 必须 连续 执行 ， 但 是 必须 以 详细 的 注释 注 明 ) 都 
以 break、return 或 throw 等 语 名 结束， 否则， 当 其 他 开发 者 维护 此 段 代 码 时 ， 很 容易 会 认 
为 这 段 代码 漏 掉 了 结束 语句 ， 而 额外 错误 地 添加 一 个 结束 语句 ， 导 致 程序 逻辑 被 改变 。 

口 with 语 句 

在 ECMAScript 脚本 规范 中 ，with 语句 用 于 为 多 个 从 属于 相同 类 或 对 象 的 属性 、 方 法 
省 略 其 相同 的 父 集 (例如 这 些 属性 、 方 法 共同 从 属 的 命名 空间 、 类 和 对 象 )， 使 代码 更 加 精 
简 。 但 是 在 实际 开发 中 ， 由 于 Javascript 本 身 就 是 一 种 最 容易 被 误解 的 脚本 语言 ， 因 此 强 
烈 建议 禁止 使 用 with 语句 。 

口 for... 语 句 

for... 语 句 是 一 种 迭代 语句 (或 称 循环 语句 )， 其 作用 是 根据 一 个 依照 指定 规律 变化 的 值 
(被 称 作 循环 节 ) 重 复 执 行 一 段 代码 若干 次 。 在 使 用 for... 语 句 时 ,应 该 尽量 避免 使 用 continue 
或 break 语句 跳出 循环 ， 随 意 地 跳出 虽然 可 以 提高 代码 效率 ， 但 是 会 极 大 地 影响 代码 的 
判读 。 

7. 数组 

在 书写 普通 的 短 数 组 时 ， 需 要 注意 数组 的 元 素 与 逗号 分 隔 符 “,” 之 间 要 有 空格 ， 例 如 
一 个 简单 数组 的 书写 方式 如 下 。 

War BeriestArray = 1 2 Sr rT er 9 WI 

如 果 数 组 元 素 的 总 长 度 超过 了 行 长 80 的 限制 ， 则 应 对 数组 进行 拆 分 书写 ， 并 保证 每 
行 行 末 以 逗号 分 隔 符 “,” 为 数组 内 的 行 结尾 ， 代 码 如 下 所 示 。 

Yar AarrToestArray 三 下 Li. 3 

I Sy E92 
29 0 3057 Mr BM Be 
44 , 45 ,， 46 ,， 47 ， 48 ]; 

需要 注意 的 是 由 于 数组 和 函数 、 语 句 等 语句 块 不 同 ， 其 末尾 的 右 中 括号 之 前 没有 分 号 
“;” 因此 为 防止 Web 浏览 器 自动 为 其 最 后 一 个 数组 元 素 添加 分 号 “;” 强 制 结尾 换行 ， 应 
将 右 中 括号 “]” 贴 近 最 后 一 个 元 素 书写 。 

8. 对 象 

对 象 的 结构 与 数组 类 似 , 其 都 由 若干 子 结构 组 成 , 但 是 由 于 对 象 的 结构 组 成 非常 复杂 ， 
子 结构 可 能 是 普通 变量 构成 的 属性 值 ， 也 可 能 是 子 对 象 、 数 组 ， 以 及 对 象 的 方法 ， 因 此 书 
写 对 象 时 应 尽量 保证 对 象 的 每 一 个 成 员 都 独占 一 行 ， 对 象 成 员 的 子 成 员 也 应 该 至 少 独 占 一 
行 。 在 下 面 的 代码 中 ， 就 书写 了 一 个 包含 嵌 套 子 对 象 结构 的 对 象 。 


anObject = { 


Color : "red" 
wheels : 4 ， 
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engine : { 
cylinders : 4 ， 


9 人 全 
}; 


9. 长 字符 串 


在 编写 Javascript 脚本 时 经 常会 需要 创建 一 些 长 字符 串 ， 并 对 长 字符 串 进 行 处 理 。 此 
时 ， 如 果 字 符 串 的 长 度 超过 了 行 长 ， 则 应 对 字符 串 进 行 拆 分 ， 将 其 拆 分 为 若干 段 短 字 符 串 
然后 使 用 连接 符 “+” 将 其 连接 。 

在 书写 这 类 字符 串 时 同样 需要 注意 应 将 连接 符 “+” 作 为 行 末 的 结尾 ， 以 防止 代码 解 
析 错 误 。 


15 项 目 代 码 的 管理 


在 团队 协作 开发 时 ， 需 要 保障 项 目 团队 每 个 成 员 代码 的 一 致 性 、 避 免 代码 元 余 及 保障 
代码 的 安全 性 ， 同 时 ， 面 对 多 个 成 员 同 时 进行 的 操作 ， 需 要 不 断 地 将 成 员 编写 的 代码 整合 
到 一 起 。 这 些 问 题 依 靠 手工 来 解决 是 十 分 困难 的 ， 因 此 ， 有 必要 使 用 一 些 自动 化 工具 来 对 
代码 进行 有 效 的 管理 ， 实 现 版 本 控制 。 


1.5.1 版 本 控制 工具 


版 本 控制 是 一 个 复杂 的 管理 体系 ， 其 通过 规范 的 版 本 控制 开发 流程 ， 使 用 稳定 高 效 的 
版 本 控制 工具 进行 工作 ， 可 以 说 绝 大 多 数 项 目 团队 的 开发 都 离 不 开 版 本 控制 。 在 进行 版 本 
控制 管理 时 ， 需 要 首先 了 解 版 本 控制 工具 的 功能 和 操作 。 


1. 版 本 控制 工具 的 功能 


版 本 控制 工具 是 一 个 软件 体系 ， 其 主要 可 以 实现 以 下 几 种 功能 。 

口 保持 代码 一 致 性 

软件 开发 是 一 个 团队 协作 进行 的 工作 ， 需 要 每 个 团队 成 员 并 行 工作 ， 也 就 是 同时 分 布 
进行 不 同 的 开发 工作 ,每 个 团队 成 员 都 需要 获取 最 新 版 本 的 代码 并 基于 这 些 代码 实现 开发 。 
因此 ， 需 要 版 本 控制 软件 维护 当前 项 目 开发 的 代码 ， 将 每 个 成 员 提交 的 代码 组 织 起 来 ， 保 
障 每 个 成 员 随 时 都 能 从 服务 器 获取 最 新 版 本 的 代码 。 

口 避免 元 余 备 份 

在 开发 项 目 时 ， 有 时 需要 将 旧 的 代码 版 本 备份 起 来 以 供 未 来 参考 。 同 时 ， 备 份 旧 的 代 
码 也 有 助 于 防止 在 开发 出 现 问 题 后 无 法 恢复 旧 有 版 本 。 因 此 ， 版 本 控制 软件 需要 存储 每 一 
个 代码 文件 的 变更 历史 记录 ， 以 便 开 发 团队 的 成 员 可 以 进行 快速 代码 追溯 和 回 滚 。 

口 创建 分 支 项 目 

有 时 开发 的 一 个 软件 项 目 可 能 被 划分 为 多 个 不 同 的 软件 项 目 。 在 现 有 的 项 目 代 码 基础 
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上 经 过 几 个 不 同方 向 的 修改 ， 软 件 项 目 转变 为 多 个 功能 和 需求 类 似 的 分 支 项 目 。 如 果 以 手 
工 的 方式 实现 此 类 功能 ， 很 可 能 需要 阅读 大 量 的 代码 和 文档 ， 以 确定 每 一 个 文件 的 功能 ， 
然后 再 进行 人 工 删 减 。 使 用 版 本 控制 软件 可 以 方便 地 建立 多 个 分 支 ， 然 后 以 母 版 本 为 参照， 
实现 插件 式 的 开发 ， 快 速 将 母 版 本 扩展 为 多 个 分 支 项 目 版 本 。 

口 协调 并 行 开发 

版 本 控制 软件 应 允许 某 一 个 团队 成 员 在 修改 某 个 文件 时 对 其 进行 锁定 ， 禁 止 其 他 团队 
成 员 修改 ， 避 免 版 本 冲突 。 版 本 控制 软件 也 应 该 具备 合并 版 本 的 功能 ， 在 发 生 版 本 冲突 后 
通过 特殊 的 标记 标明 该 文件 哪些 内 容 属于 哪个 开发 者 编写 的 ， 为 实现 什么 目的 编写 的 ， 畏 
助 开发 者 将 更 新 的 内 容 合并 为 一 个 文件 。 

口 保护 代码 安全 

版 本 控制 工具 的 作用 就 是 维护 软件 代码 的 版 本 ， 将 最 新 的 代码 分 享 给 团队 所 有 成 员 。 
但 是 在 大 型 项 目 中 ， 版 本 控制 工具 可 能 掌握 几 十 万 行 代码 ， 由 分 处 世界 各 地 的 团队 开发 ， 
不 应 允许 任意 一 个 团队 成 员 修改 所 有 代码 , 否则 一 旦 发 生 管理 问题 或 其 他 不 可 知 的 误 操作 ， 
很 可 能 造成 极 大 的 损失 。 因 此 , 版 本 控制 工具 应 该 能 限定 局 部 某 些 代码 的 修改 和 查看 权限 ， 
保护 代码 不 被 未 授权 的 团队 或 成 员 修改 ， 提 高 代码 的 安全 。 

口 整合 全 局 代码 

在 软件 开发 工作 完成 后 ， 版 本 控制 工具 还 应 提供 代码 的 打包 和 生成 工具 ， 将 包含 各 种 
版 本 控制 信息 的 代码 数据 清理 导出 为 正式 的 软件 代码 ， 供 编译 器 编译 或 提交 Web 站 点 发 布 。 

口 开发 文档 管理 

版 本 控制 工具 除了 管理 代码 外 ， 还 可 以 管理 开发 项 目的 各 种 文档 ， 例 如 功能 需求 书 、 
功能 设计 书 、 数 据 库 设计 书 、 接 口 说 明 书 、 代 码 流程 图 、 数 据 流程 图 等 。 通 过 对 这 些 文档 
的 管理 ， 为 开发 团队 提供 可 靠 的 开发 说 明 ， 辅 助 开 发 团队 更 好 地 维护 代码 。 

2. 版 本 控制 工具 的 系统 结构 


版 本 控制 工具 通常 需要 依托 一 台 服 务 器 来 存储 代码 、 代 码 的 更 新 记录 ， 以 及 一 个 完整 
的 账户 角色 权限 控制 系统 。 同 时 ， 还 需要 在 每 个 项 目 团 队 成 员 的 开发 工作 站 上 安装 对 应 的 
客户 端 ， 实 现代 码 操作 工作 ， 其 系统 结构 如 图 1-11 所 示 。 


管理 工作 站 


开发 工作 站 开发 工作 站 开发 工作 站 开发 工作 站 开发 工作 站 


图 1-11 版 本 控制 工具 的 系统 结构 图 
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3. 版 本 控制 操作 流程 

基于 版 本 控制 工具 的 开发 工作 需要 一 个 规范 的 流程 ， 每 个 团队 成 员 都 应 该 根据 这 一 流 
程 进行 版 本 操作 ， 才 能 使 版 本 控制 工具 有 效 地 工作 。 版 本 控制 流程 中 ， 项 目 团队 分 为 两 种 
角色 ， 即 版 本 管理 员 和 普通 开发 者 ， 其 工作 流程 如 图 1-12 所 示 。 


项 目 开始 


| 规划 项 目 | | - [ 
er 创建 项 目 分 配 团队 由 代 硬 会 并 
pe 和 全 作 | | | 证 本 | | ”| | 成 员 权限 导出 代码 | 会 并 版 本 | | 四 


J 有 版 本 控制 管理 员 


了 区 
一 编写 代码 | f--- 合 | | 保存 代码 各 | | 提交 代码 | [一 一 一 一 一 一 一 一 一 


更 新 代码 | |- ee -> 
普通 团队 成 员 


图 1-12 版 本 控制 操作 流程 


其 中 ， 版 本 控制 管理 员 的 工作 是 创建 版 本 项 目 ， 规 划 项 目 代码 文件 的 结构 ， 然 后 根据 
代码 文件 的 结构 以 及 团队 中 成 员 的 任务 来 分 配 每 个 成 员 对 局 部 代码 的 操作 权限 。 在 团队 成 
员 开 发 过 程 中 如 果 出 现 了 版 本 冲突 ， 则 处 理 冲 突 ， 合 并 版 本 。 最 终 ， 当 项 目 开 发 完毕 后 ， 
将 版 本 控制 工具 内 的 最 终 代 码 导出 ， 交 付 使 用 。 

普通 开发 团队 成 员 的 工作 则 是 根据 管理 员 分 配 的 权限 编写 指定 位 置 的 代码 ， 将 其 保存 
并 提交 到 服务 器 中 。 如 果 出 现 了 版 本 冲突 ， 则 提交 给 管理 员 合 并 ， 否 则 更 新 出 新 的 代码 ， 
进入 到 下 一 个 编码 环节 ， 循 环 操 作 直至 项 目 开发 完成 。 


1.5.2 ”常用 版 本 控制 工具 


作为 辅助 开发 的 重要 工具 ， 版 本 控制 工具 有 很 多 种 ， 其 功能 也 各 异 。 开 发 一 个 项 目 ， 
除了 规划 项 目的 功能 、 需 求 之 外 ， 最 重要 的 还 是 应 该 根据 项 目的 类 型 以 及 团队 的 操作 习惯 
选择 一 款 合适 的 版 本 控制 工具 。 常 用 的 版 本 控制 工具 包括 Microsoft Visual SourceSafe 
(VSS)、Concurrent Versions System (CVS)、Subversion (SVN)、Git 等 。 


1. Microsoft Visual SourceSafe (VSS) 
Microsoft Visual SourceSafe (简称 VSS) 是 微软 公司 开发 的 一 款 用 于 Visual Studio 开 


发 平台 的 版 本 控制 工具 。 与 其 他 微软 公司 开发 的 软件 类 似 ，VSS 具有 良好 的 可 视 化 操作 界 
面 ， 和 Windows、.NET 平台 以 及 Office 软件 等 有 极其 优越 的 兼容 性 ， 可 以 完全 独立 出 来 
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作为 Windows 服务 器 的 一 个 插件 安装 。 

VSS 除了 可 以 管理 基于 Visual Studio 开发 平台 的 代码 之 外 ， 还 可 以 有 效 地 管理 文本 、 
视频 、 声 音 、 可 执行 程序 、 图 像 以 及 Office 系列 文档 。 尤 其 针对 Office 系列 文档 ，VSS 甚 
至 可 以 像 管 理 代 码 一 样 管理 Office 文档 的 版 本 ， 合 并 冲突 等 。 由 于 VSS 众多 的 优点 ， 很 多 
中 小 企业 甚至 使 用 它 作为 内 部 文档 管理 系统 。 

VSS 的 缺点 在 于 , 它 仅 支 持 Windows 操作 系统 的 服务 器 和 客户 端 , 由 于 其 管理 文档 时 
需要 检索 更 复杂 的 文档 内 容 (例如 编译 过 的 Of6ce 文档 )， 因 此 和 其 他 版 本 控制 工具 相 比 
速度 较 慢 。 另 外 ，VSS 还 有 一 个 显著 的 缺点 就 是 对 远程 支持 较 差 ， 当 项 目 开发 团队 分 处 不 
同 的 地 点 时 ， 使 用 VSS 管理 项 目 代码 几乎 是 一 个 灾难 。 另 外 ，VSS 仅 能 和 Visual Studio 系 
列 开发 平台 对 接 ， 其 他 Web 开发 工具 基本 上 无 法 获得 VSS 的 客户 端 支持 ， 因 此 ， 通 常 只 
有 开发 .NET 项 目 和 基于 .NET 的 前 端 项 目 时 才 会 选择 使 用 VSS。 


2. Concurrent Versions System (CVS) 


Concurrent Versions System (CVS) 是 开发 源 代码 的 并 发 版 本 系统 , 其 可 用 于 各 种 平台 ， 
包括 Linux、Unix 和 Windows NT 等 。 相 比 VSS 的 封闭 性 ，CVS 更 加 开放 ， 具 有 更 强 的 

CVS 几乎 拥有 现代 版 本 控制 工具 的 所 有 功能 ， 支 持 代码 集中 配置 、 灵 活 的 无 限制 检 出 
模式 、 替 代 管理 、 自 动 测试 和 同步 开发 ， 甚 至 支持 通过 互联 网 来 管理 分 处 异地 的 并 行 开 发 
项 目 。 基 于 CVS 的 强大 功能 ， 许 多 开源 软件 项 目 都 使 用 该 软件 进行 管理 。 

当然 ，CVS 也 有 一 些 缺 陷 ， 例 如 它 和 VSS 一 样 采用 文件 的 方式 存储 和 管理 数据 (并 
非 数据 库 软件 )， 因 此 其 速度 和 VSS 几乎 一 样 慢 ， 且 不 支持 文件 元 数据 ， 只 能 存储 文件 本 
身 的 信息 。 另 外 CVS 是 针对 文本 的 代码 文件 而 设计 的 , 因此 对 一 些 复杂 类 型 的 文件 管理 支 
持 并 不 好 (例如 图 片 、Office 文档 等 编译 过 的 二 进 制 文件 )， 对 用 户 和 权限 的 管理 也 并 不 如 
其 他 版 本 控制 软件 那么 明确 。 另 外 , 所 有 CVS 的 服务 端 操作 几乎 都 是 以 命令 行 的 方式 实现 
的 ， 对 一 些 开发 者 而 言 比较 困难 。 

CVS 适合 管理 大 型 开源 项 目 ， 支 持 分 处 异地 的 多 个 项 目 开 发 团队 或 成 员 并 行 开发 操 
作 ,， 通 过 互联 网 提交 和 更 新 代码 ,支持 以 Web 页 面 的 形式 建立 项 目 。CVS 典型 的 应 用 就 是 
Sourceforge.net, 一 个 免费 的 公开 项 目 管理 站 点 , 任何 人 都 可 以 在 该 站 点 注册 并 创建 开源 项 
目 ， 发 布 代码 。 由 于 CVS 的 部 署 和 维护 比较 复杂 ， 对 于 中 小 型 开源 项 目 而 言 ， 完 全 可 以 直 
接 使 用 类 似 Sourceforge .net 之 类 的 在 线 CVS 项 目 维护 工具 进行 代码 维护 。 对 于 中 小 型 闭 源 
项 目 而 言 ， 则 不 建议 使 用 这 一 工具 。 


3. Subversion (SVN) 


Subversion (SVN) 是 一 款 较 “ 年 轻 ” 的 版 本 控制 工具 ， 其 针对 CVS 的 一 些 项 目 缺 陷 
而 设计 和 开发 ， 目 的 是 最 终 取 代 CVS。 与 CVS 相同 ，SVN 也 支持 几乎 所 有 操作 系统 平台 ， 
且 由 于 其 具备 了 强大 的 图 形 化 服务 端 和 客户 端 ， 能 够 方便 地 与 其 他 各 种 操作 系统 、 软 件 开 
发 平台 挂 载 ， 因 此 一 经 推出 立即 得 到 广泛 应 用 。 

SVN 作为 未 来 CVS 的 替代 品 ， 其 在 设计 上 普遍 吸取 了 CVS 的 特性 ， 完 善 地 继承 了 
CVS 的 各 种 功能 ， 例 如 代码 集中 配置 、 灵 活 的 无 限制 检 出 模式 、 替 代 管理 等 ， 也 支持 通过 
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互联 网 来 管理 分 处 异地 的 并 行 开发 项 目 。 目 前 ，SVN 已 经 具有 取代 CVS 的 态势 。 

SVN 与 CVS 最 大 的 区 别 在 于 ，SVN 具有 两 种 工作 模式 ， 一 种 是 基于 BDB (一 种 事务 
安全 型 表 类 型 的 数据 库 )， 另 一 种 则 是 基于 FSFS (一 种 不 需要 数据 库 的 存储 系统 )。 通常 绝 
大 多 数 开 发 团队 都 会 选择 第 一 种 ,基于 强大 的 本 地 数据 库 引 擎 来 管理 数据 ,获得 比 VSS 和 
CVS 更 高 的 存储 效率 。 

SVN 也 采用 集中 管理 的 工作 模式 ， 因 此 其 管理 较为 方便 , 能够 显著 地 增强 代码 的 安全 
性 ， 保 持 整 个 项 目 代码 的 一 致 性 。 另 外 ， 集 中 管理 的 原则 具有 更 加 明确 的 权限 管理 机 制 ， 
可 以 方便 地 进行 分 层 配置 管理 ， 实 现 不 同 权 限 开发 者 对 项 目 代码 的 操作 。 

但 是 SVN 的 集中 管理 数据 也 存在 一 些 问 题 ， 首 先 ， 大 量 开发 者 对 服务 器 进行 频繁 的 
检 出 、 提 交 操 作 会 对 服务 器 造成 很 大 的 负担 ; 另外， 在 开发 过 程 中 必须 随时 保持 与 服务 器 
的 联接 ， 一 旦 联接 中 断 则 将 很 可 能 无 法 工作 。 

SVN 适合 管理 中 小 型 项 目 ， 尤 其 适合 本 地 局 域 网 ， 或 者 随时 能 够 保障 广域网 连接 的 远 
程 项 目的 管理 操作 ， 其 同样 支持 以 Web 页 面 的 形式 建立 和 管理 项 目 ， 并 且 提 供 了 各 种 方便 
的 可 视 化 管理 工具 来 配置 服务 器 的 信息 ， 支 持 挂 载 在 Apache 服务 器 上 直接 运行 ， 维 护 和 
部 署 都 十 分 简单 便捷 。 基 于 以 上 理由 ， 在 进行 中 小 型 项 目 时 ， 如 果 项 目 组 同 处 一 个 局 域 网 
络 或 具有 VPN， 或 者 项 目 组 随时 可 以 保障 互联 网 联接 ， 则 完全 可 以 选择 SVN 作为 版 本 控 
制 工具 。 


1.5.3 ”版 本 操作 规范 


在 使 用 版 本 控制 工具 来 管理 项 目 后 ， 每 一 个 项 目 组 成 员 都 必须 遵守 一 定 的 版 本 操作 规 
范 ， 才 能 保障 代码 的 安全 ， 实 现 高 效 的 开发 管理 。 


1. 项 目 管理 规范 


项 目 管理 规范 是 指 项 目 管理 者 制定 的 ， 针 对 整个 项 目 源 代码 的 建立 和 操作 的 规范 。 其 
需要 遵守 以 下 守则 。 

口 项 目 建立 规范 

在 前 端 开发 过 程 中 ， 在 项 目 立 项 之 后 ， 项 目 管理 者 需要 在 版 本 控制 工具 中 建立 项 目 ， 
规划 项 目的 代码 目录 结构 ， 合 理 地 安排 项 目的 代码 存放 方式 。 
口 账户 分 配 规 范 
在 建立 项 目 后 ， 项 目 管理 者 即 可 为 每 个 项 目 组 成 员 分 配 一 个 版 本 操作 账户 ， 做 到 专人 
专 账 户 ， 要 求 每 个 成 员 都 设 定 唯一 的 密码 。 
口 权限 分 配 规范 

在 建立 项 目 后 ， 项 目 管理 者 需要 根据 项 目 组 每 个 成 员 的 职责 和 任务 ， 分 别 为 项 目 代码 
的 目录 建立 权限 控制 ， 然 后 为 这 些 目录 分 配 具 有 写 入 权限 的 操作 员 。 权 限 的 合理 分 配 可 以 
保障 项 目 代 码 的 安全 ， 防 止 项 目 组 成 员 越权 进行 代码 的 提交 。 

口 代码 合并 规范 

当代 码 的 版 本 冲突 时 ， 项 目 管理 者 有 义务 对 代码 内 容 进行 分 析 ， 然 后 将 冲突 的 两 个 或 
多 个 文档 合并 在 一 起 ， 产 生 新 的 版 本 号 。 除 此 之 外 ， 在 合并 版 本 时 还 应 该 编写 合并 版 本 的 
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操作 原因 等 信息 。 

口 分 支管 理 规范 

在 项 目 开 发 过 程 中 ， 可 能 会 根据 项 目 临 时 的 需求 或 者 项 目的 衍生 版 本 进行 调整 ， 此 时 
就 需要 项 目 管理 者 为 项 目 建立 分 支 版 本 。 每 一 个 分 支 版 本 都 必须 具备 完整 的 功能 说 明和 建 
立 的 理由 ， 以 备 项 目 维护 所 用 。 


2. 开发 操作 规范 


项 目 版 本 管理 的 开发 操作 规范 是 针对 每 一 个 项 目 开发 者 制定 的 。 其 目的 是 尽量 规范 版 
本 管理 的 操作 ， 避 免 版 本 冲突 ， 提 高 版 本 管理 的 效率 。 其 规定 了 项 目 组 成 员 在 编写 代码 和 
获取 整体 代码 时 的 做 法 。 

口 检 出 代码 规范 

检 出 操作 是 指 从 服务 器 中 下 载 整个 项 目的 代码 文档 ， 将 其 部 署 到 本 地 开发 工作 站 的 操 
作 。 在 项 目 开 始 开发 之 前 ， 每 个 参与 的 开发 者 都 必须 进行 一 次 检 出 操作 以 获取 项 目的 文件 
结构 ， 并 了 解 所 允许 编辑 的 代码 部 分 。 

口 新 增 文件 规范 

在 为 项 目 新 增 一 个 代码 或 其 他 文档 文件 时 ， 需 要 首先 在 本 地 工作 站 目录 下 创建 代码 文 
件 或 文档 文件 ， 待 编辑 完成 后 将 其 提交 到 服务 器 上 。 同 时 ， 必 须 书写 完整 的 新 增 文件 日 志 ， 
日 志 的 格式 可 以 按照 项 目 开 发 组 内 部 的 习惯 制订 ， 但 是 必须 包含 该 文件 的 名 称 、 相 对 于 整 
个 项 目的 目录 位 置 、 作 用 、 初 版 作者 以 及 创建 时 间 等 。 

口 编辑 、 提 交代 码 规范 

在 编辑 任何 一 个 项 目 代码 或 文档 文件 之 前 ， 首 先 应 该 进行 数据 更 新 工作 ， 确 保 得 到 的 
代码 或 文档 是 最 新 版 本 ， 然 后 将 其 锁定 ， 再 进行 修改 操作 。 在 修改 完成 后 ， 及 时 编写 日 志 
记录 信息 〈 包 括 新 增 的 内 容 、 修 改 的 内 容 以 及 删除 的 内 容 )， 进 行 提交 操作 ， 然 后 对 文件 解锁 。 

口 删除 文件 规范 

如 果 因 故 需 要 对 代码 文件 或 文档 文件 进行 删除 ， 可 以 直接 编写 删除 日 志 记录 信息 《〈 包 
括 删 除 文件 的 名 称 、 作 用 以 及 删除 的 理由 等 )， 然 后 再 提交 整个 目录 。 


1.6 项目 代码 的 调试 


项 目 代 码 是 Web 开发 团队 最 终生 产 的 产品 。 在 开发 代码 时 , 使 用 一 些 有 效 的 调试 工具 
可 以 快速 测试 代码 的 有 效 性 ， 追 踪 代 码 执行 的 过 程 ， 测试 代 码 的 BUG。Web 项 目的 代码 是 
基于 Web 浏览 器 运行 的 ， 因 此 绝 大 多 数 代码 调试 工具 都 需要 依托 Web 浏览 器 。 常 用 的 前 
端 代 码 调试 工具 主要 有 Firefox 浏览 器 的 Firebug 和 正 浏览 器 的 F12 开发 人 员工 具 等 。 除 
此 之 外 ， 一 些 在 线 工 具 和 基于 其 他 开发 平台 的 工具 也 可 以 辅助 开发 者 调试 代码 ， 测 试 代码 
的 逻辑 性 和 书写 严谨 性 ， 例 如 JSLint 和 JSHint 等 。 


1.6.1 Firebug 


Firebug 是 一 款 第 三 方 开发 的 基于 Firefox 的 插件 工具 ， 是 最 著名 的 Web 开发 调试 工具 
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之 一 。 Firebug 根据 Firefox 浏览 器 的 更 新 而 不 断 改进 , 已 逐渐 拓展 到 其 他 Web 浏览 器 平台 ， 
包括 Opera 和 Safari 等 。 同时 ，Google 等 Web 浏览 器 开发 商 也 采用 了 许多 Firebug 的 技术 ， 
开发 出 基于 自身 Web 浏览 器 的 类 似 工具 。 

FireBug 是 基于 Web 浏览 器 的 插件 ， 因 此 它 只 能 依附 于 Web 浏览 器 运行 。 以 Firefox 
的 Firebug 插件 为 例 ， 在 打开 Firefox 浏览 器 后 ， 执 行 【Firefox】|【 附 加 组 件 】 命 令 ， 即 可 
打开 【附加 组 件 管理 器 】 窗 口 ， 如 图 1-13 所 示 。 


什么 是 附加 组 件 ? 
及 一 本 过 左 汪 |] 开 王 村 式 让 您 观 个 性 化 Firefox 的 GE 
电 节 省 时 本 全 二 术 、 天 气 通知 程序 到 主题 氏 末 打 后 
[| 


| 
FireGestures NASA Night 
+ 和 


虹 JG Dark 
可 以 各 过 王 各 和 和 和 关上 MING SOO! aphn wohr 
各 天仙 和 局 并 keep you asnch of5TS118 


精 选 附加 组 件 


图 1-13 Firefox 的 【附加 组 件 管理 器 】 窗 口 


在 【附加 组 件 管理 器 】 右 上 角 的 搜索 框 中 输入 Firebug， 即 可 在 更 新 的 附加 组 件 列表 中 
找到 Firebug 的 最 新 版 本 。 单 击 右 侧 的 【安装 】 按 钮 ， 即 可 安装 ， 如 图 1-14 所 示 。 


最 后 开 新 最 住 加 ” 
搜索 : 。 我 的 附加 组 件 
Firebug 1.12.1 20lasF9 有 4 “ 
一 获取 附加 组 件 Frebug 为 从 和 Frfex 集 成 了 浏 上 癌 页 的 :随手 可 得 丰富 开发 工 具 。 训 可 以 对 任何 癌 页 的 .。 更 和 夫 革 | 
号 扩展 Firebug Autocompleter 1.4.1 20L2H 月 2 日 
Febug command lineautocomplete 理 宇 安装 
尊 外 m CodeBurner for Firebug 1.6 2 月 昌 


CodeBurnerisa Finefox add-on that integrates with Firebug, to oxend it with referance mateii。 更 汪 安装 


前 括 件 
Drupal For Firebug 2.2 20L341 月 浊 


的 服务 Drupal for Firenug etendsthe Firebug medule to provide Drupal specific debucging and stat.. 理科 支 半 


Firefinder for Firebug 1.4 | 


FF 
Fnes HTML element matehing chosen CSS salector(d) er XPath opresion 吾 生 


蝶 Firebug Paint Events 0.1.8 ZE 
View details of MorAfterPant events. using Firebug.Setting the preference comsend_after pai.. _ 委 里 


图 Inline Code Finder for Firebug 1.1 30 和 9 月 下 


图 1-14 安装 Firebug 
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在 安装 完成 后 ， 重 新 启动 Firefox 浏览 器 ， 即 可 单 击 导航 工具 栏 右 侧 的 Firebug 按钮 
时 |-， 启 动 Firebug 插件 ， 如 图 1-15 所 示 。 在 默认 状态 下 ，Firebug 插件 会 显示 于 Web 浏 
览 器 窗口 的 下 方 。 


图 1-15 启动 Firebug 插件 


Firebug 插件 的 窗口 分 为 三 个 部 分 ， 即 【标签 】 工 具 栏 、【 内 容 】 窗 格 和 【命令 行 】 窗 
格 。 其中, 【标签 】 工具 栏 和 【内 容 】 窗 格 都 是 默认 显示 ， 而 【命令 行 】 窗 格 则 默认 处 于 隐 
藏 状态 。 

口 【标签 】 工 具 栏 

【标签 】 工 具 栏 是 Firebug 的 导航 工具 ， 其 包含 6 个 工具 按钮 、7 个 选项 卡 按 钮 、 搜 索 
栏 以 及 3 个 窗口 按钮 等 ， 其 作用 如 表 1-7 所 示 。 


表 1-7 FEirebug【 标 签 】 工 具 栏 


类 型 ”图 标 ”名 称 作用 
工具 国 Firebug 选项 。 通过 下 拉 菜 单 提供 Firebug 的 各 种 属性 设置 , 例如 隐藏 和 禁用 Firebug， 
按钮 Firebug 的 界面 位 置 ， 用 外 部 编辑 器 打开 文档 ， 文 本 大 小 ， 信 息 选项 等 
a 查看 页 面 元 素 ” 单 击 此 按钮 ， 即 可 通过 可 视 化 的 方式 选择 页 面 中 的 元 素 ， 显 示 其 在 
HTML 的 DOM 节点 位 置 
国 后 退 跳 转 到 上 一 个 【内 容 】 窗 格 
四 前 进 跳 转 到 下 一 个 【内 容 】 窗 
日 显示 命令 行 显示 【命令 行 】 窗 格 〈 在 【内 容 】 窗 格 下 方 ) 
日 面板 选择 器 订 制 面板 按钮 ， 显 示 或 隐藏 某 个 面板 按钮 
面板 按钮 控制 台 在 【内 容 】 窗 格 显示 当前 页 面 的 各 种 错误 、 警 告 、 消 息 、 调 试 信息 和 
写 入 Cookie 的 状态 
HIML 在 【内 容 】 窗 格 显示 HIML 的 节点 树 ， 以 及 该 节点 树 的 CSS 样式 信息 
CSS 在 【内 容 】 窗 格 中 显示 当前 页 面 加 载 的 CSS 源 代 码 ， 并 允许 开发 者 对 


其 进行 临时 修改 ， 以 调试 页 面 元 素 的 样式 。 除 此 之 外 ， 还 允许 通过 选 
择 器 增加 新 的 临时 样式 
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类 型 ”图 标 ”名 称 作用 
面板 按钮 脚本 在 【内 容 】 窗 格 显示 当前 页 面 文档 加 载 的 脚本 ， 并 提供 监控 、 堆 栈 和 
断 点 ， 辅 助 开发 者 进行 调试 

DOM 在 【内 容 】 窗 格 中 显示 DOM 节点 的 属性 、 方 法 、 常 量 等 信息 

网 络 显示 文档 中 各 种 下 载 的 数据 的 明细 信息 

Cookies 显示 当前 Web 浏览 器 的 Cookie 规则 以 及 写 入 当前 系统 的 Cookie 信息 
搜索 栏 检索 当前 文档 代码 中 的 内 容 
窗口 “图 最 小 化 最 小 化 Firebug 窗 体 
按钮 新 窗口 在 新 窗口 中 打开 Firebug 

回 。 关闭 关闭 Firebug 
口 【 内 容 】 窗 格 


【内 容 】 窗 格 的 作用 是 根据 选择 的 面板 按钮 显示 对 应 的 数据 信息 , 包括 控制 台 、HTML、 
CSS、 脚 本 、DOM、 网 络 以 及 Cookies 等 。 根 据 选择 的 面板 不 同 ,【 内 容 】 窗 格 可 能 会 划分 
出 若干 窗 格 显 示 。 

口 【命令 行 】 窗 格 

在 默认 状态 下 , 【命令 行 】 窗 格 处 于 隐藏 状态 ， 当 且 仅 当 开 发 者 单 击 【 标 签 】 工 具 栏 
的 【显示 命令 行 】 按 钮 国 后 ， 该 窗 格 才 会 显示 。【 命 令 行 】 窗 格 显 示 的 内 容 与 【控制 台 】 的 
【内 容 】 窗 格 大 体 类 似 ， 因 此 当选 择 【 控 制 台 】 面 板 时 ， 此 窗 格 将 和 【内 容 】 窗 格 合并 ， 其 
内 容 在 此 不 再 资 述 。 


1.6.2 F12 开 发 人 员工 具 


F12 开发 人 员工 具 是 微软 的 Internet Explorer 浏览 器 专用 的 项 目 代码 测试 工具 。 其 自 正 
7.0 版 本 开始 被 加 入 到 正 的 发 行 版 中 , 并 随 着 正 浏览 器 的 不 断 发 展 而 改进 , 每 个 主要 的 更 
版 本 都 会 有 对 应 版 本 的 F12 开发 人 员工 具 。 

目前 F12 开发 人 员工 具 最 新 的 稳定 版 本 基于 IE 10.0， 它 可 以 模拟 下 5.0 到 焉 10.0 之 
间 所 有 正 版 本 的 代码 解析 ， 是 目前 调试 正 浏览 器 下 脚本 的 最 强大 的 工具 (截止 本 书 编写 
时 ， 微 软 的 正 11.0 和 对 应 版 本 的 F12 开发 人 员工 具 仍 处 于 测试 版 状态 ， 并 不 稳定 ， 因 此 不 
推荐 使 用 )。 

F12 开发 人 员工 具 与 Firebug 的 不 同 在 于 其 属于 微软 官方 开发 的 工具 软件 , 因此 其 性 能 
和 稳定 性 都 比较 强 ， 且 与 Web 浏览 器 结合 得 也 更 加 紧密 ， 执 行 效率 高 ， 速 度 快 。 尤 其 人 性 
化 的 是 ， 早 期 的 Firebug 并 无 中 文 版 本 ， 但 是 微软 的 F12 开发 人 员工 具 则 支持 多 种 语言 ， 
包括 中 文 。 

另外 ，F12 开发 人 员工 具 的 页 面 元 素 追 踪 功 能 也 远 胜 Firebug， 可 以 支持 模拟 多 个 下 
浏览 器 的 功能 也 十 分 实用 。 但 是 由 于 其 推出 较 晚 ， 且 界面 上 与 Firebug 有 较 大 区 别 ， 因 此 
并 未 被 开发 者 普遍 采用 。 

F12 开发 人 员工 具 是 正 浏览 器 自 带 的 工具 ， 因 此 开发 者 无 需 下 载 ， 只 需要 拥有 7.0 版 
本 以 上 的 正 浏览 器 即 可 直接 使 用 。 
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打开 正 浏 览 器 (IE 7.0 以 上 版 本 )， 按 下 Fl12 键 , 或 者 直接 按 下 组 合 键 AlttT,， 在 弹出 
的 菜单 中 执行 【F12 开发 人 员工 具 】 命 令 ， 均 可 打开 F12 开发 人 员工 具 的 窗 体 ， 如 图 1-16 
所 示 。 


图 1-16 基于 正 10.0 的 Fl2 开 发 人 员工 具 


F12 开发 人 员工 具 的 主体 界面 与 其 他 Windows 程序 类 似 ， 分 为 【菜单 】 栏 、【 选 项 卡 】 
面板 和 【内 容 】 窗 格 三 个 部 分 。 

口 【菜单 〗 栏 

【菜单 】 栏 提供 了 10 种 菜单 栏 命令 以 及 【最 小 化 】 按 钮 [=j、【 新 窗口 】 按 钮 男 和 【 关 
闭 】 按 钮 区 等 工具 。 其 命令 及 作用 如 表 1-8 所 示 。 


表 1-8 F12 开发 人 员工 具 的 【菜单 】 栏 命令 


命令 作用 

文件 提供 撤销 操作 、 自 定义 查看 源 代码 工具 和 帮助 

查找 提供 文档 元 素 选择 工具 ， 辅 助 开发 者 用 鼠标 快速 从 文档 中 选择 界面 元 素 ， 追 踪 和 查看 
DOM 节点 

锥 提供 禁止 脚本 执行 、 禁 止 弹出 窗口 阻止 程序 、 禁 止 CSS 等 功能 命令 

查看 提供 类 和 ID 信息 、 链 接 路 径 、 链 接 报告 、 选 项 卡 索引 、 访 问 键 、 源 代码 等 信息 的 快速 
查看 工具 ， 可 将 这 些 信息 直接 标注 在 浏览 器 页 面 上 

图 像 定义 页 面 图 像 的 各 种 信息 ， 包 括 禁 止 图 像 加 载 、 查 看 图 像 的 分 辨 率 、 大 小 、 路 径 、Alt 
文本 以 及 生成 图 像 报 告 等 功能 

缓存 定义 浏览 器 缓存 的 处 理 方式 ， 例 如 清除 缓存 、 清 除 Cookies 等 功能 

工具 提供 更 改 浏 览 器 窗口 尺寸 、 用 户 代理 字符 串 、 标 尺 、 颜 色 选取 器 、 轮 廓 元 素 等 小 工具 

验证 提供 根据 W3C 的 Web 标准 对 代码 进行 验证 的 各 种 工具 


浏览 器 模式 允许 选择 当前 浏览 器 以 正 7.0 到 正 10.0 等 4 种 标准 模式 以 及 正 10.0 的 兼容 性 模式 等 5 
种 方式 来 验证 当前 文档 在 不 同 版 本 正 浏览 器 中 的 脚本 兼容 性 

文档 模式 允许 当前 浏览 器 以 正 5.0 怪异 模式 (Quirks) ， 正 7.0、 正 8.0、 正 9.0、 正 10.0 的 标准 模 
式 和 正 10 怪异 模式 〈Quirks) 来 验证 代码 兼容 性 


口 【选项 卡 】 面 板 
F12 开发 人 员工 具 的 【选项 卡 】 面 板 与 Firebug 的 【面板 】 按钮 类 似 , 都 是 用 于 定义 【内 
容 】 窗 格 显示 的 内 容 ， 其 包括 6 种 选项 卡 ， 如 表 1-9 所 示 。 
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表 1-9 F12 开发 人 员工 具 的 【选项 卡 】 面 板 


作用 


在 【内 容 】 窗 格 中 显示 当前 文档 的 HTML 节点 树 ， 以 及 对 应 节点 的 CSS 样式 、 浏 览 器 执行 


样式 、 盒 模型 和 属性 

在 【内 容 】 窗 格 中 显示 当前 文档 加 载 的 所 有 CSS 文档 内 容 ， 包 括 选择 器 、 属 性 ， 并 提供 启 
用 或 禁用 的 复 选 框 ， 辅 助 开发 者 调试 

在 【内 容 】 窗 格 中 显示 当前 文档 代码 执行 时 的 警告 和 错误 信息 

在 【内 容 】 窗 格 中 显示 当前 文档 加 载 的 所 有 脚本 内 容 和 各 种 调试 工具 ， 并 提供 监视 、 堆 栈 、 
断 点 等 功能 

在 文档 加 载 时 在 【内 容 】 窗 格 中 提供 采样 工具 ， 显 示 文档 加 载 时 各 种 脚本 执行 状况 的 明细 信息 
在 文档 加 载 时 在 【内 容 】 窗 格 中 提供 捕获 工具 , 捕获 网 络 事件 的 下 载 和 传输 , 判断 各 种 HITP 


口 【内 容 】 窗 格 
用 于 根据 【选项 卡 】 面 板 选择 的 工具 ， 显 示 对 应 的 内 容 结果 。 


1.6.3 JSLint 及 JSHint 


JSLint 是 一 款 使 用 Javascript 编写 的 闭 源 验 证 工具 ， 其 可 以 扫描 Javascript 脚本 代码 ， 
追踪 和 查找 这 些 脚 本 代码 的 问题 ， 并 提供 出 现 问题 的 代码 位 置 ( 行 和 字符 位 )。JSLint 可 以 
显示 出 代码 书写 风格 的 错误 、 不 合理 的 约定 以 及 代码 结构 等 问题 ， 帮 助 开 发 者 发 现 错误 。 

JSLint 提供 了 两 种 使 用 方式 ， 一 种 是 直接 通过 其 官方 网 站 (http://wwwjslint.com) 的 
在 线 检测 工具 ， 将 代码 粘贴 到 网 站 ， 选 择 指定 的 检查 内 容 ， 即 可 在 站 点 生成 检测 报告 ， 如 
图 1-17 所 示 。 


图 1-17 JSLint 在 线 检测 工具 
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除 此 之 外 ， 也 可 以 通过 Mozilla 提供 的 Java 实现 的 开源 Javascript 引擎 一 一 Rhino 了 
追加 插件 ， 然 后 通过 命令 行 的 方式 使 用 修改 版 本 的 JSLint 功能 。 

JSHint 是 JSLint 的 一 个 分 支 项 目 。JSLint 本 身 是 基于 其 开发 者 编码 习惯 而 开发 的 ， 限 
制 较 多 ， 而 JSHint 的 目标 是 提供 更 加 个 性 化 的 Javascript 代码 质量 和 编程 风格 检查 工具 。 
相 比 JSLint，JSHint 提供 了 更 多 的 自 定义 检查 项 目 ， 其 使 用 较为 复杂 ， 但 是 可 以 针对 不 同 
项 目 开发 团队 自身 的 习惯 进行 定制 。JSHint 同样 提供 在 线 检测 工具 和 Rhino 工具 ， 其 在 线 
检测 工具 地 址 为 http:/www.jshint.com， 如 图 1-18 所 示 。 


Home 


ICENIUM [ee 
A 二 


JSHint is a tool thathelps to delect errors and potential problems in your JavaScript code To start enter your JavaScript below and 
dick the Lint button 


ZN Your code goea here. 


Warn Assume 

MAbout depugging code 回 About eval ¥ Browser 

回 About unsafe for，in 回 Aboutunsafe Ine breaks ] Development ( console ,etc) 
回 About -= null 回 When bitwise operators are used ]jouery 

网 About areumenrs,caller and .callee MI Whencodeisnotin stict mode ]ECMAScript 5 

回 About empty blocks When variable is undefined DD Mozila JavaScript exensions 
回 About unsafe comparlsons When variable is defined but not used ] ECMAScipt 3 

回 About assignments Inside if/for/ 回 Whenblocks omit ¢} DNodeJS 

回 About functions inside loops 回 Wnen new is used for side efects More opiions 


JSHint by JSHint Communiy. Created and maintained by @valueof 
Blog - Code 


图 1-18 JSHint 在 线 检测 工具 


JSLint 和 JSHint 并 不 能 百分之百 地 检测 出 代码 中 的 逻辑 错误 ， 但 是 在 语法 检测 、 编 码 
风格 检测 上 具有 不 可 替代 的 功能 。 使 用 这 两 款 工 具 ， 可 以 帮助 开发 者 和 开发 团队 维持 良好 
的 编码 习惯 ， 防 止 混乱 的 编码 风格 导致 不 可 预知 的 错误 。 


1.7 小 结 


Web 前 端 项 目 开 发 是 一 个 复杂 而 严谨 的 系统 工程 ， 其 涵盖 了 多 种 应 用 技术 ， 包 括 


42 高 效 Web 前 端 开发 之 路 一 一 YUI 3.15 


XHTML 结构 语言 、CSS 样式 表 和 Javascript 脚本 语言 等 。 因 此 ， 作 为 全 书 的 开篇 ， 本 章 简 
要 介绍 了 Web 的 产生 、 发 展 以 及 未 来 终端 的 多 样 化 ， 并 介绍 了 Web 站 点 的 构成 、 开 发 所 
使 用 的 技术 标准 、 开 发 工具 等 。 

除了 Web 开发 的 各 种 基础 技术 和 知识 外 ， 由 于 当代 Web 项 目的 开发 往往 需要 项 目 开 
发 团队 的 多 个 成 员 共同 努力 协作 实现 , 因此 在 本 章 的 末尾 还 介绍 了 Web 团队 开发 的 一 些 协 
作 经 验 和 知识 ， 包 括 Web 项 目的 开发 模式 、 分 工 协作 以 及 前 端 Web 开发 的 脚本 代码 规范 
等 。 除 此 之 外 ， 还 针对 现代 Web 的 代码 管理 方向 ， 介 绍 了 版 本 控制 工具 的 概念 、 常 用 的 版 
本 控制 工具 以 及 使 用 版 本 控制 工具 的 一 些 规范 。 

最 后 ， 针 对 前 端 脚本 开发 的 调试 工作 ， 介 绍 了 三 种 常用 的 调试 工具 ， 为 开发 者 编写 程 
序 和 测试 代码 提供 技术 支持 。 
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Web 结构 语言 ( 即 XHTML 结构 语言 ) 是 整个 Web 开发 体系 中 的 基石 ， 其 结构 和 内 容 
芮 定 了 Web 应 用 向 终端 用 户 展示 的 基础 ， 因 此 在 开发 Web 应 用 之 前 ， 首 先 需要 了 解 的 就 
是 XHTML 结构 语言 的 语法 和 规范 ， 以 及 各 种 Web 结构 元 素 、Web 结构 组 件 的 使 用 方法 。 

通常 情况 下 ，XHTML 结构 语言 可 以 为 Web 应 用 提供 三 种 类 型 的 显示 元 素 ， 即 语义 元 
素 、 表 格 元 素 和 交互 元 素 ， 除 此 之 外 ， 还 将 定义 整个 文档 的 结构 并 对 其 进行 布局 ， 正 是 这 
些 显示 元 素 构成 了 Web 应 用 。 本 章 将 简单 介绍 XHTML 语言 的 基础 语法 、 结 构 元 素 以 及 各 
种 显示 元 素 的 代码 ， 为 Web 应 用 开发 夯实 基础 。 


2.1 XHTML 结构 语言 基础 


XHTML 作为 一 种 国际 化 的 通用 标准 ， 被 广泛 应 用 于 现代 Web 应 用 的 开发 中 ， 以 存储 
Web 显示 层面 的 数据 。 目 前 ， 绝 大 多 数 的 现代 Web 站 点 和 Web 应 用 都 使 用 XHTML 结构 
语言 开发 。 使 用 合理 而 规范 的 XHTML 结构 代码 可 以 提高 Web 站 点 或 应 用 的 兼容 性 ,同时 
提高 Web 代码 解析 程序 的 解析 效率 。 

XHTML 是 更 加 严谨 和 规范 化 的 HIML， 其 设计 思路 为 沿用 HTML 的 绝 大 多 数 标记 ， 
同时 对 HTML 的 语法 进行 整合 ， 使 其 符合 XML 的 规范 。 在 绝 大 多 数 情况 下 ，XHTML 完 
全 符合 HIML 的 语法 ， 并 以 此 做 到 向 下 兼容 。 

XHTML 是 一 种 基于 标记 、 属 性 、 属 性 值 和 内 联 数据 的 结构 化 语言 ， 其 由 文档 类 型 声 
明 (Doctype Declaration， 简 称 DID ) 和 根 标记 组 成 。 根 标记 下 再 包含 各 种 内 容 标 记 。 


2.1.1 文档 类 型 声明 


文档 类 型 声明 ， 是 由 XML 继承 而 来 的 特性 ， 其 作用 是 为 读 取 和 识别 XHTML 文档 的 
软件 提供 当前 文档 的 类 型 、 语 法 规范 来 源 等 信息 。 文 档 类 型 声明 必须 被 书写 在 Web 页 文档 
的 头 部 ， 以 告知 各 种 读 取 文 档 的 软件 采用 何 种 规范 来 获取 文档 内 的 数据 并 显示 出 来 。 

XHTML 的 文档 类 型 声明 主要 包括 三 种 , 即 严格 型 (Strict Mode)、 过 渡 型 (Transitional 
Mode) 和 框架 型 (Frameset Mode)。 


1. 严格 型 声明 (Strict Mode) 


严格 型 声明 是 W3C 推荐 采纳 和 使 用 的 一 种 类 型 声明 。 在 此 声明 模式 下 ， 禁 止 使 用 一 
些 表现 样式 和 视觉 效果 的 标记 ， 同 时 规范 了 绝 大 多 数 标记 的 书写 和 使 用 方法 。 严 格 型 声明 
的 书写 方式 是 唯一 的 ， 如 下 所 示 。 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 


2. 过 渡 型 声明 (Transitional Mode) 


过 渡 型 声明 是 为 尚未 完全 适应 Web 结构 化 、 语 义 化 开发 的 Web 开发 者 提供 的 一 种 向 
下 (HTML 4.01 及 以 下 版 本 ) 兼容 的 XHTML 方案 。 在 该 方案 下 ， 开 发 者 可 以 使 用 一 些 表 
现 视觉 效果 的 旧 有 HTML 标记 ， 从 而 实现 一 些 显示 功能 。 如 非特 别 需要 ， 在 此 不 建议 使 用 
这 一 类 型 声明 。 过 渡 型 声明 的 书写 方式 如 下 所 示 。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 

Ww3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 


3， 框架 型 声明 (Frameset Mode) 


框架 是 指 完全 、 完 整地 引入 另 一 个 Web 文档 的 内 容 ， 将 其 嵌入 到 当前 的 Web 文档 中 
的 一 种 文档 类 型 ， 在 这 类 Web 文档 中 ， 当 前 的 文档 就 是 框架 文档 ， 而 被 引入 的 文档 则 被 称 
作 嵌 入 文档 或 者 嵌入 帧 。 

框架 类 型 的 Web 文档 通常 被 应 用 到 一 些 特殊 需求 的 页 面 , 通过 嵌入 外 部 文档 来 实现 文 
档 内 容 的 复 用 性 。 框 架 型 声明 的 书写 方式 如 下 所 示 。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3. 

org/TR/xhtml1/DTD/xhtmll-frameset.dtd"> 


2.1.2 标记 


标记 是 XHTML 的 基本 构成 部 分 。 所 有 XHTML 文档 内 部 都 将 根 标记 、 内 容 标记 等 以 
树 的 结构 构建 。 其 中 ， 根 标记 在 XHTML 文档 中 是 唯一 的 ， 而 内 容 标记 则 按照 指定 的 规则 

XHTML 的 标记 的 书写 方式 必须 严格 遵循 XML 标准 , 即 所 有 的 标记 都 通过 尖 括 号 ”<>” 
标识 ， 且 标记 的 名 称 必 须 小 写 。 


1. 根 标记 


根 标记 (HTML) 是 XHTML 文档 中 最 重要 的 标记 ， 其 在 XHTML 文档 中 是 唯一 的 ， 
且 只 能 位 于 DTD 标记 之 后 。 根 标记 不 是 任何 标记 的 子 集 ， 它 只 包含 头 部 标记 、 主 体 标记 
和 框架 集 标记 三 种 子 标记 (如 有 必要 , 注释 标记 也 可 以 作为 根 标记 的 子 集 )。 典 型 的 根 标记 
应 用 代码 如 下 所 示 。 


<html> 
<head> 
这 里 是 文档 的 头 部 …… 
</head> 
<body> 
这 里 是 文档 的 主体 …… 
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</body> 
</html> 


所 有 主流 Web 浏览 器 都 支持 根 标 记 。 根 标记 具有 唯一 的 实例 属性 ， 即 xmlns 属性 ， 其 
用 于 标记 当前 文档 的 命名 空间 。 在 XHTML 结构 语言 中 ，xmlns 属性 的 值 必须 是 
“http://www.w3.org/1999/xhtml”。 除了 实例 属性 外 ， 根 标记 还 支持 dir、lang 和 xmllang 等 
标准 属性 。 

2. 标记 的 分 类 


XHTML 标记 可 以 根据 其 书写 方式 分 为 两 种 ， 即 闭合 标记 和 非 闭 合 标记 。 这 两 种 标记 
都 包含 属性 、 属 性 值 ， 闭 合 标记 还 包含 内 联 的 字符 串 数据 。 

口 闭合 标记 

闭合 标记 是 指 成 对 出 现 的 标记 ， 这 类 标记 包含 开始 标记 和 结束 标记 ， 通 过 内 联 的 字符 
串 或 嵌 套 的 子 标记 来 表现 Web 内 容 。 典 型 的 闭合 标记 有 根 标记 CHIML)、 文 档 头 标记 
CHEAD)、 文 档 主体 标记 (BODY) 等 。 闭 合 标记 的 书写 方式 如 下 所 示 。 

<html></html> 


其 中 ,“<html>” 标 记 为 起 始 标 记 ,“</html>” 标 记 为 结束 标记 。 绝 大 多 数 XHTML 标 
记 都 是 闭合 标记 ， 其 内 容 必须 被 包含 在 起 始 标记 和 结束 标记 内 部 。 

口 非 闭合 标记 

非 闭合 标记 是 指 无 需 通过 内 和 网 的 字符 串 或 子 标记 来 表现 内 容 的 一 些 特殊 标记 ， 这 些 标 
记 已 经 表示 了 一 个 独立 的 内 容 块 ， 因 此 无 需 再 进行 闭合 。 但 是 在 XHTML 语法 中 ， 非 闭合 
标记 需要 通过 “人 ”结束 ， 表 示 此 标记 已 经 闭合 方便 各 种 识别 程序 查找 标记 的 结束 部 分 。 

典型 的 非 闭 合 标 记 有 图 像 标 记 〈IMG)、 横 线 标记 (HR)、 换 行 标记 (BR) 等 。 非 闭 
合 标记 的 书写 方式 如 下 所 示 。 

<br /> 

需要 注意 的 是 ， 非 闭合 标记 结束 的 斜 杠 和 标记 名 称 之 间 必 须 空 一 格 。 

3. 标记 的 嵌 套 


XHTML 的 标记 是 以 树 的 结构 组 织 构建 的 ， 通 常 闭合 标 记 都 能 够 嵌 套 其 他 标记 或 字符 
串 内 容 。 例 如 ，XHTML 的 根 标记 (HTML) 就 能 够 嵌 套 文档 头 标记 (HEAD) 和 主 文 档 体 
标记 (BODY)， 如 下 所 示 。 


<html> 
<head></head> 
<body></body> 
</html> 


非 闭 合 标记 虽然 不 能 嵌 套 其 他 标记 ， 但 可 以 作为 子 标记 被 嵌 套 在 闭合 标记 中 。 
相 比 传统 的 HIML，XHTML 的 该 套 规则 更 为 严格 。 在 HTML 中 ， 人 允许 将 两 个 标记 交 


46 高 效 Web 前 端 开发 之 路 一 一 YUI 3.15 


又 冉 套 。 例 如 ， 下 面 的 节 和 段落 就 属于 典型 的 交叉 嵌 套 。 
<p><div> 交 叉 嵌 套 的 内 容 </p></div> 


以 上 写法 在 HTML 中 是 完全 合法 的 ,但 是 在 XHTML 中 ,这 种 方式 被 严格 禁止 .XHTML 
的 标记 必须 完全 按照 指定 的 内 外 层级 嵌 套 ， 标 记 的 起 始 标签 和 结束 标签 必须 一 一 对 应 ， 如 
下 所 示 。 


<div><p> 正 常 的 层级 嵌 套 内 容 </p></div> 


2.1.3 属性 


属性 是 标记 的 描述 信息 ， 用 于 描述 标记 的 呈现 方式 、 关 联 内 容 等 信息 。 绝 大 多 数 
XHTML 标记 都 支持 各 种 各 样 的 属性 。 根据 XHTML 属性 的 作用 ,可 以 将 其 分 为 实例 属性 、 
核心 属性 、 语 言 属性 、 键 盘 属性 和 事件 属性 。 


1. 实例 属性 


实例 属性 是 每 个 XHTML 标记 的 特殊 属性 ,其 往往 与 标记 自身 的 功能 结合 得 十 分 紧密 ， 
绝 大 多 数 XHTML 标记 都 会 具有 一 个 或 多 个 实例 属性 。 


2. 核心 属性 


核心 属性 是 绝 大 多 数 XHTML 标记 都 支持 的 共同 属性 ， 其 用 于 定义 XHTML 标记 与 各 
种 程序 的 接口 ， 或 其 工具 的 提示 信息 。XHTML 的 核心 属性 包括 以 下 4 种 ， 如 表 2-1 所 示 。 


表 2-1 XHTML 核心 属性 


属性 ”属性 值 作用 
class 。 字母、 数字 或 下 划 线 ， 数 字 不 可 为 开头 ， 多 个 值 可 使 用 空 ”定义 标记 的 类 
格 隔 开 
id 字母 、 数 字 或 下 划 线 ， 数 字 不 可 为 开头 ， 该 值 在 整个 文档 ”定义 标记 在 文档 中 唯一 的 ID 
中 必须 是 唯一 的 
style ”CSS 样式 表 代码 定义 标记 的 专属 CSS 样式 
title ”文本 定义 标记 的 工具 提示 信息 


绝 大 多 数 的 XHTML 标记 都 支持 XHTML 核心 属性 ， 除 了 基准 路 径 标记 (BASE)、 头 
部 标记 (HEAD)、 根 元 素 标记 (HTML)、 元 数据 标记 (META )、 对 象 参 数 标记 (PARAM)、 
脚本 标记 (SCRIPT)、 内 联 样式 标记 (STYLE) 以 及 文档 标题 标记 (TITLE) 等 标记 以 外 。 


3. 语言 属性 


语言 属性 用 于 定义 标记 内 文本 的 流向 和 所 属 语言 的 语言 代码 。 除 基准 路 径 标记 
(BASE)、 换 行 标记 (BR)、 框 架 标 记 (FRAME)、 框 架 集 标记 (FRAMESET)、 水 平 线 标 
记 (HR)、 内 联 框 架 标 记 (IFRAME)、 对 象 参数 标记 (PARAM) 和 脚本 标记 (SCRIPT) 
以 外 ， 所 有 的 XHTML 标记 都 支持 语言 属性 。XHTML 的 语言 属性 包括 三 种 ， 如 表 2-2 所 示 。 


第 2 章 ”Web 元 素 的 结构 47 


表 2-2 XHTML 语言 属性 
属性 ”属性 值 作用 
dr I 默认 值 ， 定 义 标 记 内 的 文本 自 左 至 右 流动 
il 定义 标记 内 的 文本 自 右 至 左 流动 
lang ”语言 代码 ”定义 标记 的 工具 提示 信息 


4. 键盘 属性 


键盘 属性 用 于 定义 使 用 键盘 快速 访问 标记 的 方式 。 通 常情 况 下 ， 只 有 可 交互 的 Web 元 
素 标记 才 支 持 键盘 属性 ， 例 如 超 链 接 、 嵌 入 的 对 象 以 及 表单 控件 等 。XHTML 的 键盘 属性 
包括 两 种 ， 如 表 2-3 所 示 。 


表 2-3 XHTML 键盘 属性 
属性 属性 值 作用 


accesskey ”字符 定义 访问 该 Web 标记 的 快捷 键 
tabindex ”数字 定义 按 TAB 键 依次 访问 交互 标记 时 的 顺序 
5. 事件 属性 


事件 属性 的 作用 是 为 XHTML 标记 绑 定 对 应 的 事件 。 事件 是 指 用 户 对 XHTML 标记 进 
行 的 操作 触发 的 交互 行为 。 这 种 交互 可 以 是 执行 一 段 Javascript 脚本 ， 可 以 是 调用 DOM 内 
置 的 方法 实现 的 交互 行为 ， 也 可 以 是 改变 XHTML 的 样式 或 调用 HTTP 协议 的 POST 方法 
或 GET 方法 。XHTML 的 事件 分 为 隐 式 事件 和 显 式 事件 两 种 。 

口 隐 式 事件 

隐 式 事件 是 指 由 Web 浏览 器 等 XHTML 文档 识别 软件 根据 XHTML 默认 的 标记 和 属 
性 ， 自 动 触发 和 执行 的 事件 。 

这 类 事件 并 非 基 于 用 户 自行 定义 ， 而 是 由 软件 自行 识别 和 和 触发。 典型 的 隐 式 事件 指 超 
链接 标记 A、 按 钮 标记 BUTTON、 输 入 控件 标记 INPUT 等 交互 标记 被 鼠标 单 击 ， 以 及 绝 
大 多 数 可 视 标 记 被 鼠标 滑 过 、 单 击 时 自动 执行 的 行为 。 除 此 之 外 ， 还 有 元 数据 标记 META 
也 可 以 触发 一 些 特殊 的 隐 式 事件 (例如 自动 跳 转 到 其 他 页 面 等)。 

隐 式 事件 是 由 Web 浏览 器 自动 触发 ， 因 此 除非 开发 者 对 这 些 交互 标记 重新 定义 行为 ， 
否则 必然 会 触发 这 些 隐 式 事件 。 例 如 , 当 按 钮 标记 BUTTON 的 type 属性 值 为 “submit” 时 ， 
该 按钮 被 鼠标 单 击 , 将 自动 触发 按钮 所 属 表单 的 提交 事件 , 根据 其 所 属 表 单 标记 FORM 的 
method 属性 值 ， 触 发 HTTP 协议 的 POST 或 GET 方法， 如 下 所 示 。 


<form method="get" action="insertData.php"> 
<p><button type="submit"> 提 交 表 单 </button></p> 


</form> 
隐 式 事件 是 无 需 开 发 者 干涉 的 事件 ， 因 此 无 需 专 门 为 这 类 事件 编写 相关 的 代码 。 
口 显 式 事件 


显 式 事件 是 指 由 开发 者 通过 XHTML 标记 的 一 些 特殊 属性 编写 的 自 定义 事件 ， 这 一 组 
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属性 被 称 作 事件 属性 。 事 件 属性 的 书写 方式 与 普通 XHTML 属性 类 似 ， 属 性 名 都 需要 以 小 
写 的 方式 书写 ， 属 性 值 也 必须 被 引号 “""” 包 庄 。 例 如 ， 为 一 个 按钮 添加 鼠标 单 击 事件 ， 
执行 一 个 名 为 TestFunc 的 Javascript 函数 ， 代 码 如 下 。 


<button type="button" onclick="javascript:TestFunc()"> 单 击 </button> 


显 式 事件 的 语法 与 普通 属性 的 语法 类 似 ， 可 以 触发 的 行为 类 型 包括 窗 体 事件 、 表 单 事 
件 、 图 像 事件 、 键 盘 事件 以 及 鼠标 事件 等 。 
关于 事件 属性 的 具体 使 用 方法 ， 请 参考 之 后 相关 的 章节 。 


2.1.4 ”属性 和 属性 值 的 写 


XHTML 的 属性 和 属性 值 的 书写 方式 与 XML 一 致 ， 都 必须 书写 在 标记 名 称 之 后 空 一 
格 的 位 置 。 需 要 注意 XHTML 与 HTML 4.01、HTML 5 有 所 不 同 的 是 ， 其 强制 规定 所 有 的 
属性 必须 有 属性 值 ， 且 属性 值 必须 被 双 引 号 “""” 包 填 。 


1 闭合 标记 的 属性 


如 果 标 记 为 闭合 标记 ， 则 属性 应 书写 在 闭合 标记 的 起 始 标记 内 ， 不 能 书写 在 闭合 标记 
的 结束 标记 内 。 

例如 HIML 标记 通常 需要 定义 整个 页 面 文档 的 命名 空间 ， 因 此 需要 添加 xmls 属性 ， 
且 其 属性 值 是 唯一 的 ， 如 下 所 示 。 


<html xmlns="http://www.w3.0org/1999/xhtml"></html> 
2. 非 闭合 标记 的 属性 


如 果 标 记 为 非 闭 合 标记 ， 则 标记 的 属性 和 标记 的 结束 标识 符 斜 杠 “/” 之 间 必 须 空格 ， 
例如 页 面 基 准 URL 标记 BASE 的 属性 ， 必 须 采用 如 下 写法 。 


<base href="http://www.microsoft.com/china/" /> 
3. 标记 的 多 个 属性 


一 个 标记 可 以 同时 支持 多 种 属性 ， 但 多 个 属性 之 间 必 须 以 空格 隔 开 。 例 如 ， 定 义 一 个 
超 链接 的 URL 和 工具 提示 信息 ， 其 代码 如 下 所 示 。 


<a href="http://www.microsoft.com/chinan title=" 微 软 中 国 "> 微 软 中 国 </a> 
4. 属性 的 多 个 属性 值 


一 些 特殊 的 属性 往往 允许 定义 多 个 属性 值 ， 例 如 class 属性 (用 于 为 标记 添加 类 )， 就 
允许 同时 为 标记 定义 多 个 类 。 此 时 ， 需 要 以 空格 阳 开 多 个 属性 值 。 例 如 ， 定 义 一 个 段落 ， 
采用 了 红色 的 前 景色 和 段 首 缩 进 两 个 字符 ， 如 下 所 示 。 


第 2 章 ”Web 元 素 的 结构 49 


<p class="FrontColorRed TextIndent2em"> 测 试 段落 。</p> 
2.1.5 ”注释 


注释 是 所 有 编程 语言 共有 的 一 种 特殊 语法 构件 。 注 释 的 作用 是 标记 一 段 代码 ， 禁 止 语 
法 解析 程序 解析 这 些 被 标注 的 代码 。 在 开发 过 程 中 ， 注 释 通常 有 两 个 作用 。 第 一 个 作用 ， 
即 在 调试 时 禁止 某 段 代码 被 解析 和 执行 ， 从 而 判断 程序 出 现 问题 的 位 置 。 另 一 个 作用 则 是 
作为 代码 的 描述 和 解释 , 告知 后 续 维 护 的 开发 者 此 段 代 码 的 作用 、 意 义 以 及 其 他 相关 信息 。 

XHTML 的 注释 其 实 也 是 一 种 特殊 的 标记 , 区别 在 于 其 起 始 标记 不 需要 以 右 尖 括 号 “>” 
结束 ， 其 结束 标记 也 不 需要 以 左 尖 括号 起 始 。XHTML 的 注释 起 始 标记 为 “<!--”， 结 束 标 
记 为 “-->”。 在 注释 标记 内 ， 可 以 嵌 套 任意 非 注释 标记 和 双 下 划 线 以 外 的 文本 或 标记 ， 例 
如 ， 一 段 文本 注释 如 下 所 示 。 

<!-- 这 里 是 注释 内 容 --> 


注释 标记 内 也 可 以 嵌 套 其 他 HTML 代码 ， 例 如 ， 媒 套 一 个 段落 标记 ， 注 释 段落 标记 内 
的 内 容 ， 如 下 所 示 。 


<!-- <p> 此 段 代码 不 显示 </p> --> 
2.2 文档 结构 标记 


文档 结构 标记 是 文档 根 元 素 HTML 下 最 重要 的 标记 , 其 作用 是 规划 整个 文档 的 基本 结 
构 ， 描 述 文档 的 性 质 并 存放 文档 的 显示 内 容 。XHTML 具有 三 种 文档 结构 标记 ， 即 文档 头 
标记 、 文 档 主体 标记 和 框架 集 标 记 。 


2.2.1 文档 头 标记 


文档 头 标记 即 HEAD 标记 ， 其 作用 是 定义 文档 的 标题 、 预 加 载 的 外 部 脚本 、 样 式 等 文 
件 ， 并 定义 文档 的 元 数据 以 及 内 购 的 样式 和 脚本 等 信息 。 文 档 头 标 记 位 于 根 标记 CHIML) 
内 ， 作 为 其 第 一 个 子 集 存在 。 文 档 头 标记 仅 能 与 框架 集 标 记 (FRAMESET) 或 主体 标记 位 
于 同一 级 别 ， 且 只 能 位 于 这 两 种 标记 之 前 ， 如 下 所 示 。 


<html> 
<head> 
<title> 文 档 的 标题 </title> 
</head> 
<body> 
文档 的 内 容 …… 
</body> 
</html> 
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文档 头 标 记 具 有 一 个 唯一 的 实例 属性 profle， 其 属性 值 为 一 个 或 多 个 以 空格 隔 开 的 
URL 地 址 ， 用 于 链接 外 部 的 元 数据 信息 。 文 档 头 标记 具有 多 种 类 型 的 子 集 ， 分 别 作 用 于 文 
档 的 基准 路 径 、 外 链 文件 、 元 数据 、 脚 本 、 内 联 样式 以 及 文档 的 标题 等 。 


1. 基准 路 径 


文档 的 基准 路 径 由 基准 路 径 标 记 (BASE) 来 定义 ， 其 作用 是 在 Web 文档 中 声明 一 个 
作为 所 有 当前 Web 文档 内 链接 、 内 垦 对 象 路 径 的 基准 参考 值 和 所 有 链接 、 路 径 的 默认 值 。 

基准 路 径 标记 可 作用 于 超 链接 标记 〈A)、 图 像 标记 〈IMG)、 外 链 文 档 标 记 CLINK)、 
表单 标记 (FORM) 以 及 对 象 标记 (OBJECT) 等 ， 为 这 些 标 记 内 嵌 的 相对 URL 路 径 提 供 
路 径 基 准 ， 组 成 完整 的 URL。 


<head> 

<base href="http://www.microsoft.com/" /> 
</head> 

<body> 

<img src="eg smile.gif" /> 

<a href="#">Microsoft</a> 

</body> 


在 上 面 的 代码 中 ， 图 像 标 记 (CIMG) 引用 了 一 个 外 部 图 像 的 名 称 ， 在 基准 路 径 标记 有 
效 的 情况 下 ，Web 浏览 器 将 以 基准 路 径 为 默认 URL 解析 ， 其 解析 的 图 像 URL 应 为 


“http://www.microsoft.com/eg_smile.gif”。 


2. 外 链 文件 

外 链 文件 由 外 链 标记 (LINK) 定义 ， 其 本 身 在 XHTML 规范 中 被 赋予 了 强大 的 功能 ， 
允许 将 各 种 类 型 的 外 部 文档 加 载 和 导入 到 当前 文档 中 。 但 是 在 实际 的 应 用 中 ，Web 浏览 器 
只 支持 从 外 部 导入 CSS 样式 表 文 档 的 功能 。 外 链 标记 仅 能 出 现在 头 部 标记 (HEAD) 中 ， 
但 不 限制 出 现 的 次 数 。 使 用 外 链 标记 的 方法 如 下 所 示 。 


<head> 


<link rel="stylesheet" type="text/css" href="theme.css" /> 
</head> 


在 上 面 的 代码 中 ， 外 链 标 记 为 文档 导入 了 一 个 名 为 theme.css 的 CSS 样式 表 ， 将 样式 
表 的 代码 应 用 到 Web 文档 中 。 

3. 元 数据 

文档 的 元 数据 由 元 数据 标记 (META ) 定义 , 其 作用 是 为 Web 浏览 器 提供 当前 XHTML 
文档 的 元 数据 信息 ， 例 如 当前 文档 的 字符 集 、 更 新 日 期 、 关 键 字 等 ， 从 而 为 客户 端 Web 浏 
览 器 提供 报头 ， 以 及 为 搜索 引擎 疏 虫 程序 提供 检索 的 依据 。 合 理 使 用 元 数据 标记 ， 可 以 帮 
助 开 发 者 更 快 、 更 高 效 地 推广 网 站 ， 提 高 网 站 SEO 效率 。 

元 数据 标记 必须 存放 于 头 部 标记 (HEAD) 内 ， 最 好 放 在 头 部 标记 (HEAD) 的 开头 ， 
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以 便 外 部 的 搜索 引擎 程序 高 效 地 抓 取 数据 。 一 个 页 面 可 以 有 多 个 元 数据 标记 ， 根 据 元 数据 
标记 的 属性 用 于 不 同 的 用 途 。 

元 数据 标记 的 content 属性 是 必 选 选项 ， 但 是 http-equiv 属性 和 name 属性 仅 能 有 一 个 
存在 ， 其 使 用 方法 如 下 所 示 。 


<meta http-equiv="charset" content="gbk"> 

<meta http-equiv="expires" content="31 Dec 2013"> 

上 面 的 代码 分 别 定义 了 Web 页 文档 的 编码 字符 集 和 缓存 过 期 时 间 。 
4. 脚本 


脚本 由 脚本 标记 〈SCRIPT) 定义 ， 其 作用 是 为 Web 文档 导入 一 段 外 部 的 脚本 ， 或 直 
接 执行 一 段 内 联 的 脚本 。 脚 本 标记 允许 开发 者 插入 和 使 用 Javascript、VBScript、XHTML 
DOM 等 多 种 类 型 的 脚本 语言 编写 行为 代码 ， 提 高 Web 页 的 交互 性 。 在 下 面 的 代码 中 ， 就 
调用 了 一 段 XHTML 的 DOM 脚本 ， 实 现 窗 口 关闭 。 


<script type="text/javascript"> 
widnow.close(); 
</script> 


在 此 需要 注意 的 是 ， 所 有 主流 的 Web 浏览 器 都 支持 脚本 标记 ， 但 是 仅 有 下 系列 Web 
浏览 器 支持 使 用 VBScript 脚本 语言 ， 其 他 Web 浏览 器 仅 支 持 使 用 Javascript 脚本 语言 。 
XHTML 的 DOM 脚本 通常 被 作为 Javascript 类 型 处 理 , 其 type 属性 与 Javascript 脚本 一 样 ， 


为 “text/javascript”。 


5. 内 联 样式 


内 联 样式 需要 使 用 内 联 样式 标记 (STYLE) 定义 ,其 作用 是 为 Web 文档 嵌入 一 段 内 联 
的 CSS 样式 表 代 码 ， 定 义 Web 文档 内 各 种 XHTML 标记 的 样式 ， 并 规定 这 些 CSS 样式 表 
代码 在 何 种 媒介 类 型 下 有 效 。 

内 联 样式 标记 与 外 链 标记 都 能 为 Web 文档 添加 CSS 样式 表 ， 其 区 别 在 于 ， 外 链 标记 
导入 的 是 外 部 的 CSS 样式 表 文 件 ， 以 提高 外 部 的 CSS 样式 表 标 记 的 复 用 性 ， 而 使 用 内 联 
样式 标记 ， 则 这 些 内 购 的 CSS 样式 表 代码 只 能 为 当前 Web 文档 使 用 ， 没 有 任何 复 用 性 
可 言 。 

如 果 仅 需要 编写 单独 的 XHTML 文档 ， 可 以 使 用 内 联 样式 标记 ， 而 如 果 是 为 整个 站 点 
的 所 有 Web 页 面 编写 样式 ， 推 荐 采用 外 链 标记 。 使 用 内 联 样式 标记 添加 CSS 样式 表 的 方 
法 如 下 所 示 。 

<html> 

<head> 
<style type="text/css"> 
hl {color:red} 
p {color:blue} 
</style> 
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</head> 
<body> 
<hl>Header 1</h1> 
<p>A paragraph.</p> 
</body> 
</html> 


6. 文档 标题 


文档 标题 通过 文档 标题 标记 (TITLE) 来 定义 ， 其 作用 是 定义 整个 Web 文档 的 标题 。 
通常 情况 下 ，Web 浏览 器 会 读 取 该 标记 的 内 容 , 并 显示 于 浏览 器 窗口 的 标题 栏 或 状态 栏 上 。 
文档 标题 标记 在 整个 Web 文档 中 是 唯一 的 ， 且 必须 作为 文档 头 部 标记 (HEAD) 的 子 集 存 
在 。 使 用 文档 标题 标记 定义 Web 文档 的 标题 ， 代 码 如 下 所 示 。 


<html> 
<head> 
<title>XHTML Tag Reference</title> 
</head> 
<body>The content of the document...</body> 
</html> 


2.2.2 文档 主体 标记 


文档 主体 标记 (BODY) 的 作用 是 存储 所 有 Web 页 中 的 显示 元 素 ， 为 这 些 显示 元 素 提 
供 一 个 基本 的 容器 。 文 档 主体 标记 是 XHTML 中 最 重要 的 标记 ， 是 XHTML 文档 根 标记 的 
组 成 部 分 之 一 ， 与 头 标记 并 列 ， 存 在 于 头 标记 之 后 。 使 用 文档 主体 标记 定义 文档 内 容 ， 代 
码 如 下 所 示 。 


<html> 
<head> 
<title> 文 档 的 标题 </title> 
</head> 
<body> 
文档 的 内 容 
</body> 
</html> 


绝 大 多 数 XHTML 标记 都 可 以 作为 文档 主体 标记 的 子 集 , 文档 主体 标记 在 XHTML 文 
档 中 是 唯一 的 。 除 框架 集 页 以 外 ， 所 有 在 XHTML 文档 中 显示 的 内 容 都 应 从 属于 文档 主体 
标记 。 


2.2.3 ”框架 集 标记 


框架 集 标记 (FRAMESET) 是 一 种 特殊 标记 ， 其 作用 是 为 Web 文档 嵌入 一 个 或 多 个 
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框架 标记 FRAME)， 通 过 框架 标记 将 外 部 的 XHTML 文档 显示 到 当前 页 面 中 。 
1. 使 用 框架 集 标记 


框架 集 标记 (FRAMESET) 仅 能 作用 于 框架 类 型 声明 文档 的 标记 。 在 框架 类 型 声明 的 
XHTML 文档 中 ， 框 架 集 标记 将 作为 根 标 记 (HIML) 的 唯一 子 集 存 在 。 在 这 种 文档 中 ， 
根 标 记 (HTML) 不 包含 文档 头 标记 (HEAD)， 也 不 包含 文档 主体 标记 (BODY)， 其 使 用 
方法 如 下 所 示 。 

<frameset rows="25%,50%,25%"> 

<frame src="header.html" /> 
<frame src="main.html" /> 
<frame src="footer.html" /> 


</frameset> 
在 上 面 的 代码 中 , 定义 了 一 个 上 中 下 三 行 结构 的 框架 集 , 分 别 链接 外 部 的 headerhtml、 
main.html 以 及 foooterhtml Web 页 。 框 架 集 标记 通过 两 种 实例 属性 和 若干 属性 值 来 定义 其 
内 岗 的 框架 标记 〈FRAME) 之 间 的 位 置 关 系 ， 如 表 2-4 所 示 。 
表 2-4 ”框架 集 标记 的 实例 属性 


属性 属性 值 ”是否 必 选 ”作用 DTD 
cols 像素 值 ” 否 定义 框架 集 的 列 的 数量 和 宽度 F 
百分比 定义 框架 集 的 列 的 数量 和 宽度 
, 定义 框架 集 的 列 的 数量 和 宽度 
TOWS 像素 值 ” 否 定义 框架 集 的 行 的 数量 和 高 度 F 
百分比 定义 框架 集 的 行 的 数量 和 高 度 
这 定义 框架 集 的 行 的 数量 和 高 度 


例如 ， 需 要 将 框架 集 标 记 中 的 框架 以 列 的 方式 排列 ， 可 以 定义 其 cols 属性 ， 而 如 果 需 
要 将 框架 集 标记 中 的 框架 以 行 的 方式 排列 ， 则 可 以 使 用 rows 属性 。 这 两 个 属性 是 互 斥 的 ， 
也 就 是 说 ， 使 用 了 其 中 一 个 ， 就 不 能 再 使 用 另 一 个 。 

2. 定义 框架 

框架 标记 (FRAME ) 是 框架 集 标 记 (FRAMESET) 的 子 集 ， 用 于 定义 从 外 部 引用 的 
Web 页 。 框 架 标记 是 一 种 特殊 的 容器 标记 ， 其 本 身 不 包含 任何 内 容 ， 通 过 指定 的 属性 来 引 
入 外 部 文档 内 容 。 例 如 ， 从 外 部 引入 一 个 名 为 nav.html 的 文档 ， 可 以 直接 调用 框架 标记 的 
src 属性 ， 如 下 所 示 。 


<frame src="nav.html" /> 


除了 src 属性 外 ， 框 架 标记 还 包含 多 种 实例 属性 ， 可 以 定义 框架 的 边框 、 边 距 、 描 述 、 
是 否 允 许 调节 尺寸 等 信息 ， 如 表 2-5 所 示 。 
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表 2-5 框架 标记 的 实例 属性 


属性 属性 值 ”是 否 必 选 作用 DID 
frameborder 0 香 不 显示 框架 的 边框 F 
1 显示 框架 的 边框 
longdesc URL 和 否 框架 导入 Web 文档 的 描述 页 面 的 URL 地 址 F 
marginheight ”像素 值 ” 否 框架 顶部 和 底部 的 边 距 F 
marginwidth ”像素 值 ” 耕 框架 左 侧 和 右 侧 的 边 距 F 
name 文本 否 框架 的 名 称 F 
noresize noresize 奋 禁止 调整 框架 的 尺寸 F 
scrolling yes 得 显示 框架 的 滚动 条 F 
no 不 显示 框架 的 滚动 条 
auto 根据 框架 的 内 容 自行 决定 是 否 显示 框架 的 滚动 条 
SIC URL 否 框架 导入 Web 文档 的 URL 地 址 F 


2.3 ”文档 的 布局 


布局 是 指 对 文档 中 的 各 种 显示 元 素 进行 分 隔 、 排 列 、 定 位 的 操作 ， 使 之 更 加 结构 化 和 
美观 。XHTML 文档 支持 采用 多 种 类 型 的 标记 来 布局 ， 例 如 使 用 文档 节 标 记 (DIV)、 无 序 
列表 标记 〈UL)、 定 义 列表 标记 (DL) 等 ， 来 规划 不 同 格式 和 类 型 的 显示 内 容 。 


2.3.1 文档 节 布 局 


文档 节 布 局 是 指 采 用 文档 节 标 记 (DIV〉 作 为 显示 内 容 的 容器 的 布局 方式 。 文 档 节 标 
记 (DIV) 是 XHTML 最 重要 的 标记 之 一 ， 其 作用 是 将 一 个 XHTML 文档 划分 为 多 个 部 
然后 再 通过 CSS 样式 表 定 义 这 些 部 分 的 样式 。 可 以 说 ， 文 档 节 标记 具有 布局 的 功能 ， 可 以 
灵活 地 为 各 种 内 容 布局 。 

例如 ， 在 下 面 的 代码 中 ， 就 使 用 了 文档 节 标 记 将 页 面 划分 为 五 个 区 块 ， 包 括 页 头 、 导 
航 、 内 容 、 侧 栏 和 页 脚 等 ， 如 下 所 示 。 


<body> 
<div id="header"></div> 
<div id="nav"></div> 
<div id="content"></div> 
<div id="aside"></div> 
<div id="footer"></div> 
</body> 


除了 直接 布局 和 划分 区 块 外 ， 文 档 节 标记 还 可 以 自由 地 相互 嵌 套 ， 从 而 实现 更 加 灵活 
的 布局 。 例 如 ， 定 义 一 个 图 片 新 闻 显示 元 素 ， 可 以 通过 将 若干 文档 节 标记 组 合 而 实现 。 


<div id="news album"> 


<div id="news album padding"></div> 
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<div idq="news_album title"> 图 片 新 闻 标题 </div> 
<div id="news_album decoration"> 图 片 新 闻 描述 </div> 
</div> 


文档 节 布 局 是 目前 Web 开发 中 最 常用 的 布局 , 通常 用 于 整 页 内 容 的 大 模块 分 区 布局 操 
作 ， 或 对 一 些 内 容 较 为 灵活 、 由 多 个 复杂 的 部 分 构成 的 模块 进行 布局 。 

由 于 文档 节 布 局 所 使 用 的 是 单一 的 文档 节 标 记 ， 因 此 滥用 文档 节 标 记 布 局 很 可 能 降低 
页 面 结构 代码 的 可 读 性 。 因 此 ， 在 实际 开发 过 程 中 ， 建 议 将 文档 节 布 局 和 其 他 儿 种 布局 混 
合 使 用 ， 使 用 多 种 布局 和 多 种 标记 提高 代码 的 可 读 性 和 维护 性 。 


2.3.2 ”定义 列表 布局 


定义 列表 布局 是 指 采 用 定义 列表 标记 (DL) 作为 显示 内 容 的 容器 的 布局 方式 。 定 义 列 
表 标 记 的 特点 是 可 以 存储 依照 标题 和 内 容 成 对 出 现 的 定义 词 条 和 定义 描述 ， 因 此 对 于 标题 
和 内 容 成 对 显示 的 数据 ， 使 用 定义 列表 布局 可 以 使 内 容 更 加 符合 语义 化 的 标准 ， 也 更 富 
结构 性 。 

定义 列表 标记 包含 两 种 子 集 ， 即 定义 词 条 标记 (DT) 和 定义 描述 标记 (DD)， 这 两 种 
子 集 必须 以 “ 词 条 + 描述 ”的 方式 成 对 存在 ， 且 不 能 调换 顺序 。 

其 中 ， 定 义 词 条 标记 必须 与 定义 描述 标记 成 对 使 用 旦 必须 位 于 定义 描述 标记 之 前 ， 定 
义 描述 标记 用 于 为 定义 列表 标记 中 的 定义 词 条 标记 提供 解释 信息 或 描述 信息 。 

通常 情况 下 , 定义 描述 标记 与 定义 词 条 标记 成 对 出 现 , 且 必 须 位 于 定义 词 条 标记 之 后 。 
一 个 定义 列表 标记 可 以 包含 多 对 定义 词 条 和 定义 描述 。 

典型 的 定义 列表 布局 通常 用 于 内 容 管理 系统 (CMS) 的 新 闻 模 块 。 例 如 ， 一 个 新 闻 分 
类 下 包含 的 若干 新 闻 词 条 ， 其 中 新 闻 分 类 名 称 可 以 用 定义 词 条 标记 (DT) 存储 ， 新 闻 词 条 
则 可 以 用 定义 描述 标记 (DD) 存储 ， 代 码 如 下 。 


<dl class="news list"> 
<dt class="news_category"> 国 际 新 闻 </dt> 
<dd class="news data"> 
<!-- 新 闻 内 容 --> 
</dd> 
<dt class="news_category"> 国 内 新 闻 </dt> 
<dd class="news data"> 


<!-- 新 闻 内 容 --> 
</dd> 
二 a 
</dl> 


在 上 面 的 代码 中 ， 展 示 了 一 个 由 若干 新 闻 分 类 组 成 的 新 闻 列 表 模 块 ， 其 中 ， 每 一 个 子 
模块 都 是 由 一 个 定义 词 条 标记 和 一 个 定义 描述 标记 组 成 。 


2.3.3 无 序列 表 布 局 


无 序列 表 布局 是 指 采 用 无 序列 表 标 记 进行 布局 的 一 种 布局 方式 。 无 序列 表 是 一 种 由 无 
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序列 表 标 记 (UL) 和 列表 项 目标 记 (LI) 组 成 的 父子 结构 模块 ， 以 呈现 出 若干 列表 项 目 并 
列 显示 的 效果 。 

其 中 ， 无 序列 表 标 记 (UL) 定义 列表 显示 的 区 块 ， 为 列表 项 目 提供 显示 容器 ， 而 列表 
项 目标 记 (LI)》 则 用 于 承载 并 列 关系 的 各 项 内 容 。 

无 序列 表 布局 通常 应 用 于 Web 页 的 导航 部 分 , 或 者 需要 呈现 若干 同一 级 别 的 整齐 数据 
(如 新 闻 列表 、 用 户 名 列表 等 )。 在 处 理 单列 的 数据 时 ， 无 序列 表 完 全 可 以 蔡 代 表格 ， 使 
Web 页 的 结构 更 加 简单 。 下 面 的 代码 就 是 采用 无 序列 表 制 作 的 一 个 页 面 导航 条 , 代码 如 下 。 


<ul class="nav list"> 
<1i><a href="index.php”title=" 首 页 "> 首页 </a></1i> 
<li><a href="news.php" title=" 新 闻 "> 新 闻 </a></1i> 
<1i><a href="product.php" title=" 产 品 "> 产品 </a></1i> 
<li><a href="customer.php" title=" 客 户 "> 客户 </a></1i> 
<li><a href="news.php" title=" 新 闻 "> 新 闻 </a></1i> 
</ul> 


2.4 语义 元 素 


XHTML 语言 的 前 身 HIML 语言 是 基于 学 术 文 档 的 超 文本 显示 而 设计 ， 因 此 包含 了 很 
多 用 于 学 术 文 档 的 专用 标记 ， 来 表现 某 些 特殊 文本 的 语义 ， 这 些 标 记 所 表现 的 内 容 就 是 语 
义 元 素 ， 而 这 些 标 记 则 被 称 作 语义 化 标记 。 

XHTML 完整 地 继承 了 HTML 的 语义 化 标记 和 各 种 语义 化 的 特色 ,通过 语义 元 素 和 语 
义 化 标记 表现 其 内 容 与 文档 之 间 的 关系 。 常 用 的 XHTML 语义 元 素 可 以 分 为 块 语义 元 素 和 
内 联 语义 元 素 等 两 种 。 


2.4.1 块 语义 元 素 


块 语义 元 素 是 指 独立 成 块 ， 是 Web 文档 中 一 个 独立 的 内 容 区 域 的 语义 元 素 , 其 包括 标 
题 元 素 、 段 落 元 素 、 插 图 元 素 、 块 引用 元 素 等 。 块 语义 元 素 又 被 称 作 块 状元 素 、 块 元 素 等 。 


1. 标题 元 素 


标题 是 位 于 文章 、 章 节 开始 的 ， 用 于 标明 文章 、 作 品 等 内 容 的 简短 语句 。 标 题 通常 以 
简洁 的 方式 阐述 下 文 的 中 心 含义 。 在 Web 页 中 ， 标 题 元 素 具有 特殊 的 意义 ， 通 常情 况 下 ， 
搜索 引擎 的 检索 功能 会 优先 处 理 页 面 的 关键 字 以 及 页 内 的 标题 元 素 。 因 此 ， 合 理 地 使 用 标 
题 元素 ， 可 以 使 Web 文档 的 结构 更 加 语义 化 ， 更 容易 被 搜索 引擎 检索 。 

XHTML 提供 了 6 种 标题 标记 ， 分 别 为 HL、H2、H3、H4、HS5 和 H6， 用 于 表示 文档 
中 的 一 级 标题 到 六 级 标题 ， 基 本 可 以 满足 一 般 Web 文档 的 排版 和 语义 化 需求 。 下 面 的 代码 
就 分 别 定 义 了 这 六 种 标题 ， 如 下 所 示 。 


<h1> 第 一 章 ”这 里 是 一 级 标题 </h1> 
<h2>1.1 这 里 是 二 级 标题 </h2> 


第 2 章 ”Web 元 素 的 结构 57 


<h3>1.1.1 这 里 是 三 级 标题 </h3> 
<h4>1.1.1.1 这 里 是 四 级 标题 </h4> 
<h5>1.1.1.1.1 这 里 是 五 级 标题 </h5> 
<h6>1.1.1.1.1.1 这 里 是 六 级 标题 </h6> 


所 有 的 主流 Web 浏览 器 都 支持 采用 上 文 的 方式 为 文档 编目 ， 定 义 标 题 。 通 常情 况 下 ， 
Web 浏览 器 会 将 标题 部 分 加 粗 显 示 ， 并 根据 标题 的 级 别 决定 显示 标题 文本 的 字体 尺寸 。 例 
如 ,在 正 11.0 浏 览 器 下 ， 以 上 的 代码 显示 效果 如 图 2-1 所 示 。 


第 一 章 这 里 是 一 级 标题 
1.1 这 里 是 二 级 标题 

1.1.1 这 里 是 三 级 标题 
1.1.1.1 这 里 是 四 级 标题 

1.1.1.1.1 这 里 是 五 级 标题 


T11111 这 里 是 六 归 标 加 


图 2-1 各 级 标题 的 显示 效果 


2， 段 落 元 素 


段落 是 一 种 文章 内 的 内 容 单位 ， 其 通常 为 若干 语句 组 成 的 句 群 ， 并 且 这 些 语句 具有 一 
个 共同 的 意义 。 在 Web 页 中 ， 段 落 元 素 通 常用 于 表现 正文 中 的 内 容 。XHTML 提供 了 段落 
标记 〈P) 将 文本 或 其 他 数据 以 正文 段落 的 方式 进行 语义 化 显示 。 

段落 标记 是 一 种 基本 的 语义 化 标记 , 在 绝 大 多 数 Web 文档 中 有 重要 的 语义 意义 。 在 默 
认 状 态 下 ，Web 浏览 器 会 为 段落 标记 前 后 创建 一 些 补 白 并 定义 默认 的 行 高 。 以 下 就 是 一 个 
以 段落 标记 定义 的 典型 段落 ， 代 码 如 下 。 

<p>This is some text in a very short paragraph.。 </p> 


依照 英文 的 行文 习惯 ， 段 落 往往 项 格 书写 。 但 是 针对 中 文书 写 习惯 ， 如 果 需 要 对 段落 
进行 特殊 订 制 (例如 有 段 首 缩 进 2 个 字符 )， 可 使 用 CSS 样式 表单 独 定义 段落 的 样式 。 


3. 插图 元 素 


XHTML 和 HTML 都 被 称 作 超 文本 标记 语言 ， 所 谓 超 文本 ， 就 是 可 以 存储 和 展示 超出 
文本 内 容 的 丰富 媒体 元 素 的 内 容 ， 例 如 图 像 、 声 音 、 视 频 和 动画 等 。 在 很 多 文章 中 ， 插 图 
都 是 重要 的 正文 内 容 ， 有 一 些 文档 甚至 完全 以 插图 为 主 。 

XHTML 通过 图 像 标记 (IMG) 为 Web 页 添加 插图 元 素 ， 将 外 部 的 图 像 插 入 到 当前 
Web 页 中 。 图像 标记 的 作用 是 在 Web 页 面 区 域 的 指定 位 置 链接 一 个 外 链 图 像 ， 以 嵌入 的 方 
式 显 示 。 图 像 标记 并 不 会 把 外 部 的 图 像 保存 到 当前 的 外 部 网 络 中 ， 只 会 通过 外 部 的 链接 读 
取 这 一 图 像 。 一 旦 外 部 图 像 源 失效 ， 则 图 像 标记 链接 的 图 像 也 将 随 之 无 法 显示 。 

图 像 标记 还 有 一 种 用 法 ， 即 作为 未 来 插入 图 像 的 预先 占 位 ， 被 称 作 图 像 占 位 符 。 根 据 
XHTML 的 规范 ， 所 有 的 图 像 标记 都 必须 包含 图 像 的 描述 文本 。 在 下 面 的 代码 中 ， 就 使 用 
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了 图 像 标记 来 为 Web 页 添加 了 一 幅 插 图 ， 代 码 如 下 。 
<img src="http://www.baidu.com/img/bdlogo.gif"” alt=" 百 度 一 下 ， 你 就 知道 ”/> 


在 Web 浏览 器 中 ， 即 可 查看 到 加 载 此 图 像 的 Web 页 面 ， 如 图 2-2 所 示 。 


Bai 红 百度 


图 2-2 插图 元 素 的 页 面 


所 有 主流 Web 浏览 器 都 支持 图 像 标记 , 但 是 对 图 像 标 记 链接 的 图 像 格式 有 所 区 别 。 儿 
乎 所 有 的 Web 浏览 器 都 支持 JPEG、GIF、PNG 以 及 BMP 四 种 格式 的 图 像 ， 但 是 在 IE 6.0 
及 以 下 版 本 的 正 浏览 器 中 ， 对 PNG 仅仅 是 有 限 支持 ， 即 仅 支持 不 包含 Alpha 通道 的 16 
位 色 PNG 图 像 , 或 包含 Alpha 通道 的 8 位 色 PNG 图 像 , 不 支持 包含 Alpha 通道 的 16 位 色 
及 以 上 色 位 的 PNG 图 像 。 

在 正 7.0 浏览 器 中 ， 虽 然 支持 了 包含 Alpha 通道 的 16 位 色 及 以 上 色 位 的 PNG 图 像 ， 
但 是 使 用 这 些 图 像 会 导致 页 面 加 载 效率 急剧 下 降 。 直 至 下 8.0 浏览 器 ， 才 真正 解决 了 PNG 
图 像 的 显示 问题 。 

另外 ， 在 页 面 中 采用 BMP 图 像 会 极 大 地 降低 页 面 打 开 的 效率 ， 导 致 用 户 需要 下 载 大 
量 数据 才能 显示 。 图 像 标记 支持 多 种 类 型 的 实例 属性 ， 用 于 定义 图 像 的 各 种 参考 信息 、 路 
径 等 ， 如 表 2-6 所 示 。 


表 2-6 图 像 标记 的 实例 属性 


属性 属性 值 是 否 必 选 ”作用 DTD 
alt 文本 是 图 像 的 描述 信息 STF 
SIc URL 是 图 像 链 接 目标 的 URL 地 址 STF 
align left 否 定义 图 像 居 左 对 齐 IE 
right 定义 图 像 居 右 对 齐 
top 定义 图 像 项 部 对 齐 
middle 定义 图 像 居中 对 齐 
bottom 定义 图 像 底部 对 齐 
border 像素 值 否 定义 图 像 边框 的 宽度 TF 
height 像素 值 否 定义 图 像 的 宽度 像素 值 STF 
百分比 定义 图 像 根据 其 父 元 素 的 相对 宽度 百分比 值 
hspace 像素 值 否 定义 图 像 左右 两 侧 的 补 白 TF 
ismap URL 否 定义 图 像 由 服务 器 端 映 射 的 URL 地 址 STF 
longdesc URL 否 图 像 导入 Web 文档 的 描述 页 面 的 URL 地 址 STF 
usemap URL 否 定义 图 像 由 客户 端 映射 的 URL 地 址 STF 
Vspace 像素 值 否 定义 图 像 上 下 两 方 的 补 白 TIF 
width 像素 值 否 定义 图 像 的 高 度 像素 值 STF 
百分比 定义 图 像 根据 其 父 元 素 的 相对 高 度 百 分 比值 
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4. 块 引用 元 素 


引用 是 学 术 文档 中 的 一 种 重要 内 容 ， 其 标识 了 在 文章 中 这 一 段 内 容 并 非 作者 原创 ， 而 
是 引 自 外 部 ， 并 且 通 常会 标注 内 容 的 来 源 信息 。 块 引用 元 素 是 通过 块 引 用 标记 实现 的 ， 其 
将 定义 一 个 块 状 的 引用 区 域 ， 为 区 域内 的 文本 提供 来 源 信息 ， 并 将 这 些 文本 内 容 从 正文 中 
分 离 出 来 ， 独 立地 显示 。 使 用 块 引用 标记 的 示例 如 下 所 示 。 


<blockquote cite="http://www.baidu.com"> 
Here is a long quotation here is a long quotation here is a long quotation. 
</blockquote> 


块 引 用 标记 通过 其 cite 实例 属性 来 定义 引用 内 容 的 来 源 。 在 此 需要 注意 的 是 ， 所 有 主 
流 Web 浏览 器 都 支持 块 引用 标记 ， 但 尚 无 任何 一 款 Web 浏览 器 支持 对 块 引用 标记 的 cite 
属性 进行 解析 ， 只 有 一 些 脚 本 框架 通过 第 三 方 的 方式 实现 了 类 似 功 能 。 


2.4.2 ”内 联 语 义 元 素 


内 联 语 义 元 素 的 作用 与 块 语义 元 素 类 似 ， 都 可 以 标识 某 些 Web 页 内 容 的 语义 和 作用 ， 
但 是 其 通常 存在 于 Web 文档 的 块 内 容 以 内 ， 以 行内 的 方式 显示 。 典 型 的 内 联 语义 元 素 包括 
超 链接 元 素 、 缩 写 元 素 、 短 引用 元 素 等 。 内 联 语义 元 素 又 被 称 作 内 联 元 素 。 


1 超 链接 元 素 


超 链接 元 素 通 过 超 链接 标记 (A)、 图 像 映 射 标记 (MAP) 和 热 区 标记 (AREA) 在 
Web 页 中 创建 一 个 热点 ,然后 捕获 用 户 的 鼠标 单 击 操作 ,根据 以 上 这 三 种 标记 定义 的 URL 
地 址 决定 链接 跳 转 的 位 置 ， 实 现 超 链接 功能 。 

口 超 链接 标记 

超 链接 标记 (A) 的 作用 是 为 文本 或 其 他 整体 的 显示 元 素 定义 一 个 由 URL 和 锚 记 组 成 
的 路 径 ， 并 为 用 户 提供 跳 转 到 此 路 径 的 接口 ， 当 用 户 单 击 此 标记 时 ， 即 执行 默认 的 跳 转 交 
互 行为 。 在 默认 状态 下 ， 跳 转 的 目标 文档 将 直接 显示 在 当前 的 窗口 中 。 如 果 希 望 弹出 新 的 
窗口 或 跳 转 到 指定 的 框架 内 ， 则 可 以 通过 超 链接 标记 的 target 属性 进行 自 定义 。 

在 下 面 的 代码 中 ， 将 使 用 超 链接 标记 定义 一 个 基于 文本 的 超 链接 ， 代 码 如 下 。 


<a href="http://www.microsoft.com" title="Microsoft">Microsoft</a> 


口 图 像 映射 标记 和 热 区 标记 

超 链 接 标记 只 能 为 文本 或 一 个 整体 的 显示 元 素 定义 链接 ， 如 果 需 要 将 一 个 显示 元 素 拆 
分 成 若干 个 局 部 单元 ， 再 为 其 分 别 添加 链接 ， 则 需要 使 用 图 像 映射 标记 (MAP) 和 热 区 标 
记 (AREA)。 图像 映射 标记 和 热 区 标记 结合 起 来 ， 可 以 为 某 一 个 单独 显示 元 素 的 局 部 单元 
添加 链接 。 

例如 ， 在 下 面 的 代码 中 ， 添 加 了 一 个 图 像 显 示 对 象 ， 并 通过 图 像 映射 标记 添加 了 三 个 
局 部 单元 的 超 链 接 ， 代 码 如 下 。 
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<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> 
<map name="planetmap" id="planetmap"> 
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> 
<area shape="circle" coords="129,161,10" href ="mercur.html" alt= 
"Mercury" /> 
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> 
</map> 


2. 缩写 元 素 


缩写 元 素 通常 用 于 为 某 个 单词 或 短语 添加 一 个 工具 提示 ， 显 示 其 完整 的 内 容 或 书写 方 
法 。XHTML 提供 了 两 种 内 联 的 缩写 元 素 ， 分 别 对 应 截断 缩写 和 首 字 母 缩写 两 种 方式 。 

口 截断 缩写 

截断 缩写 是 指 将 某 个 单词 的 局 部 提取 出 来 ， 作 为 整个 单词 的 缩写 ， 例 如 etcetera 可 以 
缩写 为 “etc.” 等 。 截 断 缩写 需要 使 用 截断 缩写 标记 “ABBR)， 如 下 所 示 。 


<abbr title="etcetera">etc.</abbr> 

口 首 字母 缩写 

首 字母 缩写 是 指 将 英文 短语 中 的 每 一 个 单词 第 一 个 字母 提取 出 来 ， 作 为 整个 短语 的 缩 
写 , 例如 World Wide Web， 可 以 缩写 为 WWW 等 。 首 字母 缩写 多 用 于 英文 短语 ， 其 需要 使 
用 首 字母 缩写 标记 (ACRONYM)， 如 下 所 示 。 

<acronym title="World Wide Web">WWW</acronym> 

使 用 缩写 元 素 ， 可 以 为 语句 块 中 的 缩写 内 容 提 供 完 整 的 注释 ， 帮 助 阅读 者 了 解 缩写 内 
容 的 含义 ， 防 止 出 现 歧义 。 

3. 短 引用 元 素 

短 引用 是 相对 于 块 引 用 的 一 种 引用 形式 ， 其 相 比 块 引用 ， 多 用 于 内 联 的 正文 ， 引 用 外 
部 某 一 个 语句 或 某 一 个 词组 , 将 其 插入 到 普通 正文 中 。 短 引用 元 素 需 要 使 用 短 引 用 标记 (Q) 
实现 ， 代 码 如 下 所 示 。 


<q>Here is a short quotation here is a short quotation</q> 


2.5 表格 元 素 


表格 是 Web 页 中 一 种 特殊 的 数据 显示 形式 ， 其 通常 由 标题 、 表 头 、 正 文 和 脚注 组 成 ， 
可 以 显示 分 行 和 分 列 的 大 量 数据 单元 。 在 XHTML 中 ， 表 格 是 由 表格 标记 及 其 多 种 复杂 的 
子 集 标记 组 成 ， 每 个 标记 都 承载 着 不 同 的 功能 。 


2.5.1 表格 标记 


表格 标记 (TABLE) 是 XHTML 中 结构 最 复杂 的 标记 之 一 ， 其 支持 多 种 类 型 的 子 元 素 
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标记 ， 例 如 表格 标题 标记 〈CAPTION)、 表 头 标记 CTHEAD )、 脚 注 标记 (CTFOOT)、 表 
格 主体 标记 “TBODY)、 表 格 列 组 标记 (COLGROUP) 以 及 表格 行 标记 (CTR) 等 。 

表格 标记 支持 多 种 复杂 的 实例 属性 ， 用 于 定义 表格 的 外 观 、 边 框 、 补 白 、 间 距 等 ， 以 
使 表格 适应 各 种 类 型 的 数据 ， 如 表 2-7 所 示 。 


表 2-7 表格 标记 的 实例 属性 


属性 属性 值 是 否 必 选 ”作用 DID 
align left 否 定义 表格 水 平 左 对 齐 IF 
right 定义 表格 水 平 右 对 齐 
center 定义 表格 水 平 居中 对 齐 
bgcolor RGB 颜色 香 定义 RGB 十 进 制 颜色 背景 ， 例 如 RGB(255,0,0) TF 
十 六 进 制 颜色 定义 十 六 进 制 颜色 背景 ， 例 如 #ft0000 
颜色 名 称 定义 颜色 背景 ， 例 如 red 
border 像素 值 否 定义 表格 边框 的 宽度 STF 
cellpadding ”像素 值 否 定义 单元 格 边缘 与 其 内 容 之 间 的 补 白 像素 大 小 STF 
百分比 定义 单元 格 边 缘 与 其 内 容 之 间 的 补 白 相 对 单元 格 的 
百分比 大 小 
cellspacing ”像素 值 理 定义 单元 格 之 间 的 补 白 像素 值 STF 
百分比 定义 单元 格 之 间 的 补 白 相对 表格 的 大 小 
frame vold 否 不 显示 外 侧 边 框 STF 
above 显示 上 部 的 外 侧 边 框 
below 显示 下 部 的 外 侧 边 框 
hsides 显示 上 部 和 下 部 的 外 侧 边 框 
lhs 显示 左边 和 右边 的 外 侧 边 框 
rhs 显示 左边 的 外 侧 边 框 
vsides 显示 右边 的 外 侧 边 框 
border 在 所 有 四 个 边 上 显示 外 侧 边框 
rules none 否 没有 线条 STF 
groups 位 于 行 组 和 列 组 之 间 的 线条 
TrOWS 位 于 行 之 间 的 线条 
cols 位 于 列 之 间 的 线条 
all 位 于 行 和 列 之 间 的 线条 
summary ”文本 否 定义 表格 的 摘要 信息 STF 
百分比 定义 表格 相对 其 父 元 素 的 宽度 百分比 SIF 
width 像素 值 定义 表格 的 宽度 像素 值 


严格 模式 的 XHTML 禁止 使 用 表格 的 align 属性 、bgcolor 属性 定义 表格 内 容 的 对 齐 方 
式 和 背景 色 。frame 属性 和 rules 属性 是 XHTML 专 有 的 新 属性 ， 


Web 浏览 器 支持 。 


因此 目前 仅 有 部 分 较 新 的 


早期 的 Web 页 面 往往 是 用 表格 标记 来 实现 布局 , 实际 上 这 是 一 种 错误 的 方法 , 表格 标 
记 本 身 的 作用 仅仅 应 该 是 显示 各 种 数据 ， 而 非 为 页 面 中 的 元 素 布局 和 定位 。 


2.5.2 ”简单 表格 


表格 具有 两 种 模式 ， 即 简 各 


模式 和 完整 模式 。 简 单 模式 的 表格 通常 直接 存储 分 行 和 分 
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列 的 各 种 数据 ， 因 此 其 表格 标记 只 包含 表格 行 标记 (TR)， 每 个 表格 行 标记 (TR) 再 包含 
若干 表格 单元 格 标 记 (TD) 和 表 头 单元 格 标记 (TH)。 


1. 表格 行 


行 是 表格 中 横向 单元 格 的 排列 集合 。 在 表格 的 行 中 ， 若 干 单元 格 会 按照 指定 的 高 度 位 
置 横向 排列 。 行 以 表格 行 标记 (TR) 表示。 在 表格 中 ,包含 单元 格 最 多 的 表格 行 标记 决定 
表格 的 列 数 。 表 格 行 必须 包含 至 少 一 个 表格 的 单元 格 才 有 意义 。 不 包含 单元 格 的 表格 行 在 
Web 浏览 器 中 将 被 隐藏 。 
严格 模式 的 XHTML 允许 开发 者 通过 align 属性 和 valign 属性 分 别 定义 该 行内 单元 格 
的 水 平 对 齐 方式 和 垂直 对 齐 方 式 。 但 通常 情况 下 , 绝 大 多 数 开发 者 都 会 使 用 CSS 样式 表 来 
操作 这 些 显示 方式 。 
在 下 面 的 代码 中 ， 定 义 了 一 个 包含 4 个 单元 格 的 表格 行 ， 代 码 如 下 。 
<tr align="center"> 
<td> 春 </td> 
<td> 夏 </td> 
<td> 秋 </td> 
<td> 冬 </td> 
</tr> 


2. 单元 格 


单元 格 是 表格 中 最 基本 的 显示 单位 ， 其 存储 了 表格 中 每 一 条 具体 的 数据 。XHTML 的 
表格 支持 两 种 类 型 的 单元 格 ， 即 表 头 单元 格 和 表格 单元 格 。 

表 头 单元 格 由 表 头 单元 格 标记 (TH) 表示 ， 用 于 定义 标题 类 型 的 单元 格 。 在 Web 浏览 
器 中 , 表 头 单元 格 内 的 文本 往往 以 粗 体 显示 , 一 些 Web 浏览 器 还 会 将 其 水 平 居 中 对 齐 处 理 。 
表格 单元 格 由 表格 单元 格 标 记 (TD) 表示， 用 于 定义 存储 普通 数据 的 表格 单元 格 。 

在 下 面 的 代码 中 ， 简 单 定 义 了 一 个 横向 带 表 头 单元 格 的 数据 行 ， 代 码 如 下 。 

<tr align="center"> 

<th> 季 节 </th> 

<td> 春 </td> 

<td> 夏 </td> 

<td> 秋 </td> 

<td> 冬 </td> 
</tr> 


3. 单元 格 的 跨行 


在 一 些 复杂 的 表格 中 ， 很 可 能 会 出 现 一 个 单元 格 需要 纵 跨 多 行内 容 ， 此 时 就 需要 设置 
单元 格 的 纵 跨行 数 ， 使 其 能 够 纵 跨 多 个 表格 行 。 表 头 单元 格 标记 TH) 和 表格 单元 格 标记 
(TD) 都 支持 纵 跨 属 性 rowspan, 该 属性 的 属性 值 为 大 于 1 的 整数 , 表示 单元 格 纵 跨 的 行 数 。 

在 下 面 的 代码 中 ， 就 定义 了 两 个 表格 行 ， 这 两 个 表格 行 共用 一 个 表 头 单元 格 标记 ， 代 


人 码 如 下 。 
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<tr> 


<th rowspan="2"> 季 节 </th> 
<td> 春 </td> 
<td> 夏 </td> 


EE 
EE 


<td> 秋 </td> 
<td> 冬 </td> 


</tr> 


需要 注意 的 是 ， 在 上 面 的 代码 中 ， 第 一 行 的 第 一 个 单元 格 纵 跨 了 两 行 ， 因 此 第 二 行 只 
需要 包含 两 个 单元 格 即 可 。 


4. 单元 格 的 跨 列 


XHTML 不 仅 允 许 单元 格 的 跨行 ， 还 允许 单元 格 跨 列 显示 ， 以 定义 各 种 复杂 的 数据 内 
容 。 表 头 单元 格 标记 〈TH) 和 表格 单元 格 标记 〈TD) 都 支持 横 跨 属性 colspan， 该 属性 的 
属性 值 为 大 于 1 的 整数 ， 表 示 单 元 格 横 跨 的 列 数 。 

在 下 面 的 代码 中 ， 就 定义 了 三 个 表格 行 ， 其 中 第 一 行 的 数据 横 跨 两 列 ， 作 为 第 二 行 和 
第 三 行 数据 共同 的 标题 ， 代 码 如 下 。 


<tr 


</ 韦 


> 
<th colspan="2"> 季 节 </th> 
r> 


<tr> 


</E 
<tr 


< 二 


2.5.3 


<td> 春 </td> 
<td> 夏 </td> 
i 

~ 
<td> 秋 </td> 
<td> 冬 </td> 
至 及 


完整 表格 


完整 的 表格 通常 应 包含 标题 、 表 头 、 脚 注 、 主 体 等 四 个 部 分 ， 其 中 表 头 、 脚 注 和 主体 
还 可 以 包含 若干 列 组 、 表 格 行 ， 每 个 表格 行内 可 以 包含 若干 表格 单元 格 和 标题 单元 格 等 。 


一 些 简 


的 表格 也 可 以 直接 包含 若干 表格 行 ， 每 个 表格 行内 青 包 含 一 定数 量 的 单元 格 等 。 
下面 的 代码 中 ， 展 示 了 一 个 完整 的 表格 及 其 包含 的 所 有 子 集 标 记 ， 代 码 如 下 所 示 。 


<table> 


<colgroup span="7" style="text-align:center;"> 
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<col span="5" style="color:#000;" /> 
<col span="2" style="color:#f£00;" /> 
</colgroup> 
<caption>Calendar</caption> 
<thead> 
<tr> 
<th>Mon .</th> 
<th>Tues .</th> 
<th>Wed.</th> 
<th>Thur .</th> 
<th>Fri.</th> 
<th>Sat .</th> 
<th>Sun.</th> 


</tr> 
</thead> 
<tfoot> 
<tr> 
<th colspan="7">Aug. 2013</th> 
</tr> 
</tfoot> 
<tbody> 
<tr> 
<td>29</td> 
<td>30</td> 
<td>31</td> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
5AEE> 
<!1—— ee 二 
</tbody> 
</table> 


在 Web 浏览 器 中 , 将 自动 地 把 表格 中 的 各 种 标记 按照 指定 的 规范 进行 排列 , 然后 显示 
出 来 ， 如 图 2-3 所 示 。 


Calendar 
Mon. Tues. Wed. Thur. Fri. Sat. Sun. 
29 30 31 1 2 3 4 
5 6 2 8 全 - 功 - 央 
12 13 14 15 16 17 18 
1]19 20 21 2 23 24 25 
26 27 28 29 30 31 

Aug. 2013 


图 2-3 完整 表格 的 显示 效果 
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1. 表格 的 标题 


表格 标题 的 作用 是 表明 整个 表格 的 含义 ， 以 及 表格 的 编号 排序 等 信息 。 在 定义 表格 标 
题 时 ， 需 要 使 用 表格 标题 标记 (CAPTION)。 

表格 标题 标记 是 一 种 闭合 标记 ， 其 在 表格 的 子 集 标 记 中 只 能 出 现 一 次 。 在 使 用 表格 标 
题 标 记 时 需要 注意 的 是 ， 当 表格 包含 表格 列 组 标记 (COLGROUP) 时 ,表格 标题 标记 将 位 
于 表格 列 组 标记 (COLGROUP) 之 后 ， 否 则 ， 表 格 标题 标记 必须 位 于 表格 内 其 他 子 集 标记 
之 前 。 绝 大 多 数 表格 往往 会 省 略 表格 标题 标记 。 例 如 ， 定 义 一 个 表格 的 标题 为 “ 表 1-1 表 
格 的 属性 ” 代码 如 下 所 示 。 


<caption> 表 1-1&nbsp;&nbsp; 表 格 的 属性 </caption> 
2. 表 头 、 脚 注 和 主体 


表 头 、 脚 注 和 主体 分 别 用 于 定义 表格 各 列 数据 的 名 称 、 汇 总 信息 和 具体 数据 。 其 中 ， 
表 头 定义 各 列 数据 的 名 称 ， 脚 注定 义 各 列 数据 的 汇总 ， 表 格 主体 存储 具体 的 各 列 数据 。 

在 XHTML 中 ， 表 头 的 数据 必须 存储 于 表 头 标记 (THEAD ) 中 ; 脚注 的 数据 必须 存储 
于 脚注 标记 〈TFOOT) 中 ; 表格 主体 的 数据 必须 存储 于 表格 主体 标记 〈TBODY) 中 。 在 
编写 表格 数据 的 代码 时 ， 以 上 这 三 种 XHTML 标记 必须 一 起 使 用 ， 且 必须 按照 表 头 标记 、 
脚注 标记 和 表格 主体 标记 的 顺序 使 用 。 这 三 种 标记 内 都 可 以 包含 若干 表格 行 和 表格 单元 格 。 


在 XHTML 中 ， 人 允许 开发 者 通过 一 些 特殊 的 标记 元 素 捕 获 用 户 的 交互 操作 ， 根 据 指定 
的 行为 将 操作 的 结果 传递 到 服务 器 中 。 这 些 特殊 的 标记 元 素 即 交互 元 素 。 


2.6.1 表单 


表单 是 所 有 交互 元 素 的 基本 容器 ， 其 作用 是 将 若干 交互 控件 组 合 到 一 个 特殊 的 容器 
中 ， 并 在 触发 一 些 特殊 事件 时 将 这 些 控件 内 的 用 户 数据 提交 给 服务 器 端的 程序 ， 实 现 前 后 
端的 数据 交换 。 

表单 标记 (FORM) 本 身 在 Web 浏览 器 中 并 不 显示 ， 也 不 承担 交互 数据 的 获取 和 显示 
功能 ， 所 有 交互 数据 的 获取 和 显示 功能 往往 依赖 于 表单 标记 内 包含 的 各 种 交互 控件 。 在 下 
面 的 代码 中 ， 定 义 了 一 个 简单 的 登录 表单 标记 ， 如 下 所 示 。 


<form action="http://www.test.com/login" method="post"> 
<fieldset> 
<legend> 系 统 登录 </legend> 
<label> 账 户 : 
<input type="text" name="account" value="" /> 
</label> 
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<labe1> 密 码 : 


<input type="password" name="password" value="" /> 


</label> 
</fieldset> 
</form> 


表单 标记 具有 多 种 实例 属性 , 用 于 定义 提交 数据 的 URL、 数据 类 型 、 提 交 方式 等 信息 ， 


如 表 2-8 所 示 。 
属性 属性 值 是 否 必 选 
action URL 是 
accept MIME 类 型 ” 否 
accept-charset ”字符 集 名 称 ”和 否 
enctype MIME 类 型 ” 否 
method get 否 
post 
name 文本 和 否 
target _blank 和 否 
_parent 
_self 
_top 
框架 名 称 


表 2-8 表单 标记 的 实例 属性 


作用 

定义 提交 表单 中 控件 交互 数据 的 目标 URL 
定义 通过 文件 上 传 来 提交 的 文件 的 类 型 
发 送 到 服务 器 中 的 表单 数据 的 字符 集 编码 
发 送 到 服务 器 中 的 表单 数据 的 文件 类 型 
使 用 HTTP GET 方法 发 送 表单 数据 

使 用 HITP POST 方法 发 送 表单 数据 
定义 表单 的 名 称 

定义 在 新 窗口 打开 目标 URL 

定义 在 当前 框架 的 父 框架 打开 目标 URL 
定义 在 当前 窗口 或 当前 框架 打开 目标 URL 
定义 在 当前 窗口 的 顶部 框架 打开 目标 URL 
定义 在 指定 名 称 的 框架 打开 目标 URL 


在 严格 模式 的 XHTML 规范 下 ， 表 单 标记 至 少 应 包含 一 个 action 属性 ， 定 义 交互 数据 
的 URL 目标 。 通 常情 况 下 ， 还 应 该 为 表单 标记 添加 method 属性 ， 定 义 提 交 表 单 的 具体 方 
式 ， 例 如 HITP GET 方式 或 HITPPOST 方式 等 。 


2.6.2 ”标签 与 数据 集合 组 件 


在 使 用 各 种 交互 组 件 时 ， 经 常会 需要 对 交互 组 件 进行 描述 ， 或 对 交互 组 件 进行 分 组 ， 
此 时 就 需要 使 用 一 些 辅助 性 的 组 件 ， 例 如 标签 组 件 和 数据 集合 组 件 。 


1. 标签 组 件 
标签 组 件 的 作用 是 为 各 种 交互 组 件 提供 描述 性 的 文本 信息 ， 例 如 组 件 的 名 称 等 。 除 此 
之 外 ， 标 签 组 件 还 可 以 将 一 些 交 互 组 件 包 时 起来， 扩大 交互 组 件 的 焦点 区 域 ， 当 月 


标签 组 件 时 ， 标 签 组 件 可 以 将 焦点 自动 转移 到 其 包含 的 交互 组 件 上 。 
标签 组 件 通过 标签 标记 (LABEL) 存储 这 些 名 称 内 容 ， 在 下 面 的 代码 中 ， 就 使 用 标签 


组 件 包 右 了 两 个 单 选 按钮 类 型 的 输入 组 件 ， 定 义 了 输入 组 件 的 名 称 ， 代 码 如 下 。 


日 户 单 击 


<label><input type="radio" name="gender" value="male" /> 男 </label> 
<label><input type="radio" name="gender" value="female" /> 女 </label></p> 


标签 组 件 是 最 简单 的 交互 组 件 ， 其 除了 可 以 包 右 其 他 交互 组 件 ( 例 如 输入 组 件 、 列 表 
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菜单 组 件 和 文本 域 组 件 等 ) 之 外 ， 还 可 以 在 非 包 囊 的 状态 下 与 这 些 交互 组 件 关 联 ， 同 样 实 
现 捕获 用 户 鼠 标 焦点 的 功能 ， 此 时 需要 使 用 标签 标记 的 for 属性 。 

标签 标记 的 for 属性 的 属性 值 通常 为 标签 组 件 关联 的 其 他 交互 组 件 的 id 属性 值 , 例如 ， 
一 个 文本 域 类 型 的 输入 组 件 id 为 account, 那么 可 以 通过 此 id 属性 与 标签 组 件 建立 关联 ， 
代码 如 下 。 


<label for="account"> 账 户 名 称 </label> 


<input type="text" name="username" id="account" /> 


除了 Safari 2 及 之 前 版 本 的 Safari 浏览 器 之 外 ， 所 有 的 主流 Web 浏览 器 都 支持 标签 组 
件 。 在 Web 开发 中 ， 灵 活 使 用 标签 组 件 可 以 提高 各 种 交互 页 面 的 操作 便捷 性 。 


2. 数据 集合 组 件 


数据 集合 组 件 的 作用 是 为 各 种 交互 组 件 分 组 、 分 列 ， 对 交互 组 件 进行 归纳 整理 。 在 一 
些 复 选 框 类 型 的 输入 组 件 集合 中 ， 使 用 数据 集合 组 件 可 以 更 清楚 地 反映 复 选 框 组 的 范围 
使 交互 组 件 更 加 富有 条 理 。 
数据 集合 组 件 由 数据 集合 标记 (FIELDSET) 和 数据 集合 标题 标记 (LEGEND) 组 成 ， 
其 关系 类 似 表格 标记 〈TABLE) 和 表格 标题 标记 〈CAPTION)， 但 是 相 比 之 下 ， 数 据 集合 
标题 标记 (LEGEND ) 在 数据 集合 标记 (FIELDSET) 中 是 必须 存在 的 ， 不 可 或 缺 。 
下 面 的 代码 定义 了 一 个 简单 的 数据 集合 组 件 ， 通 过 数据 集合 标题 标记 (LEGEND) 显 
示 数 据 集合 的 名 称 ， 如 下 所 示 。 
<fieldset> 
<legend>health information</legend> 
<label>height: <input type="text" /></label> 


<label>weight: <input type="text" /></label> 
</fieldset> 


在 Web 浏览 器 中 , 数据 集合 往往 会 显示 出 一 个 边框 , 将 其 包 陵 的 内 容 环绕 起 来 。 在 正 
浏览 器 下 ， 以 上 代码 显示 效果 如 图 2-4 所 示 。 


health information 
height: [ weight: | 


I 


图 2-4 数据 集合 名 称 显示 效果 


2.6.3 输入 组 件 


输入 组 件 是 最 复杂 的 交互 组 件 ， 可 以 多 种 形式 显示 ， 捕 获 输入 的 文本 内 容 、 选 择 的 指 
定 元 素 、 上 传 的 文件 等 。 除 此 之 外 ， 输 入 组 件 还 提供 了 表单 操作 功能 ， 可 以 提交 或 重 置 表 


68 高 


效 Web 前 端 开发 之 路 一 一 YUI 3.15 


单 标 记 (FORM) 内 所 有 组 件 的 数据 。 
输入 组 件 通 过 输入 标记 (INPUT) 定义 ， 该 标记 包含 多 种 实例 属性 ， 用 于 定义 输入 组 


件 的 特性 ， 如 表 2-9 所 示 。 


表 2-9 输入 标记 的 实例 属性 


属性 属性 值 是 否 必 选 ”作用 DID 
accept MIME 类 型 否 定义 上 传 文件 时 提交 的 文件 类 型 STF 
align left 耕 定义 控件 居 左 对 齐 TF 

right 定义 控件 居 右 对 齐 

top 定义 控件 顶部 对 齐 

middle 定义 控件 居中 对 齐 

bottom 定义 控件 底部 对 齐 
alt 文本 否 定义 图 像 域 的 替代 文本 STF 
checked checked 否 定义 单 选 域 或 复 选 域 初始 化 时 被 选中 STF 
disabled disabled 三 定义 此 输入 控件 处 于 禁用 状态 STF 
maxlength ”整数 否 定义 文本 域 或 密码 域 允许 输入 的 最 大 字数 STF 
name 文本 耕 提交 表单 时 输入 控件 的 名 称 STF 
readonly readonly 否 定义 此 输入 控件 处 于 只 读 状 态 STF 
size 整数 否 定义 文本 域 或 密码 域 的 宽度 倍数 〈 以 字符 宽度 STF 

计算 ) 

Src URL 耕 定义 图 像 域 引用 外 部 图 像 的 URL 地 址 STF 
type button 否 定义 输入 控件 为 按钮 域 STF 

checkbox 定义 输入 控件 为 复 选 域 

file 定义 输入 控件 为 文件 域 

hidden 定义 输入 控件 为 隐藏 域 

image 定义 输入 控件 为 图 像 域 

password 定义 输入 控件 为 密码 域 

radio 定义 输入 控件 为 单 选 域 

reset 定义 输入 控件 为 重 置 域 

submit 定义 输入 控件 为 提交 域 

text 定义 输入 控件 为 文本 域 


在 以 上 实例 属性 中 ， 最 重要 的 实例 属性 是 type 属性 ， 该 属性 决定 了 输入 标记 的 基本 性 


状 。 输 入 标记 可 分 成 10 种 功能 
口 文本 域 


口 密码 域 


状态 ， 如 下 所 示 。 


默认 显示 为 带 有 边框 的 矩形 元 素 ， 获 取 焦点 后 ， 人 允许 输入 各 种 明文 文本 并 显示 出 来 。 


外 观 与 文本 域 儿 乎 一 致 ， 区 别 是 其 内 容 以 密 文 的 方式 显示 《〈 由 特殊 的 符号 替代 ， 在 不 


同 的 操作 系统 和 Web 浏览 器 中 样式 有 所 区 别 )。 


口 单 选 域 
通常 成 组 使 用 , 显示 为 空心 
属性 相同 的 话 ， 则 当 其 中 一 个 音 


圆 形 标志 , 被 单 击 选择 后 变 为 实心 。 如 果 多 个 单 选 域 的 name 
选 域 被 选中 后 ， 其 他 单 选 域 的 选择 状态 将 被 清除 。 


口 复 选 域 


显示 为 空心 矩形 标志 ， 被 单 击 选择 后 变 为 实心 。 与 单 选 域 有 所 区 别 ， 同 一 name 属性 
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的 复 选 域 允许 被 同时 选中 。 
口 文件 域 
又 被 称 作 上 传 域 ， 显 示 为 一 个 无 法 输入 内 容 的 文本 域 以 及 一 个 紧 贴 的 浏览 按钮 。 单 击 
按钮 后 可 以 调用 浏览 器 的 打开 文件 窗口 ， 选 择 所 需 的 文件 ， 将 其 路 径 插入 到 文本 域 中 ， 帮 
助 表单 获取 文件 的 路 径 ， 从 而 在 提交 表单 时 将 文件 上 传 到 服务 器 中 。 
口 隐藏 域 
隐藏 域 是 一 种 不 可 见 的 交互 控件 ， 主 要 用 于 根据 脚本 获取 用 户 操作 的 隐 含 信息 进行 提 
交 操 作 ， 或 在 表单 中 提交 一 些 不 需要 用 户 手动 修改 的 数据 。 
口 图 像 域 
图 像 域 可 以 将 外 链 的 图 像 文件 显示 为 输入 控件 ， 获 取 用 户 单 击 、 双 击 或 右 击 等 操作 ， 
实现 交互 行为 。 在 默认 情况 下 ， 单 击 图 像 域 会 直接 提交 表单 。 
口 按钮 域 
按钮 域 与 按钮 标记 (BUTTON) 类似， 都 在 页 面 中 显示 一 个 按钮 ， 捕 获 用 户 的 鼠标 操 
作 ， 并 根据 脚本 执行 对 应 的 行为 。 
口 提交 域 
提交 域 与 按钮 域 类 似 ， 都 显示 为 一 个 按钮 ， 其 作用 是 捕获 用 户 的 鼠标 操作 ， 将 表单 内 
容 提交 到 服务 器 。 
口 重 置 域 
重 置 域 与 按钮 域 、 提 交 域 类 似 ， 都 显示 为 一 个 按钮 ， 其 作用 是 将 当前 所 处 表单 内 所 有 
已 经 修改 的 内 容 恢复 原状 。 
通过 变化 输入 标记 的 type 属性 来 定义 一 个 包含 多 种 输入 内 容 类 型 的 表单 集合 ， 代 码 
如 下 。 
<form action="http://www.test.com/signin" method="post"> 
<p> 
<labe1> 用 户 账户 :<input type="text" name="account" /></label> 
</p> 
<p> 
<labe1> 鉴 权 口令 :<input type="password" name="password" /></label> 
</p> 
<p> 
<labe1> 重 复 口 令 :<input type="password" name="validator" /></label> 
<*/p> 
<p> 


<label><input type="radio" name="gender" value="male" /> 男 </label> 
<label><input type="radio" name="gender" value="female" /> 女 
</label></p> 

<p> 
<label> 个 人 照片 :<input type="file" name="photo" /></label> 

</p> 

<fieldset> 
<legend> 兴 趣 爱 好 </legend> 
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<label><input type="checkbox" name="interest" value="1" /> 音乐 
</label> 
<label><input type="checkbox"” name="interest"” value="2" /> 小 说 
</label> 
<label><input type="checkbox" name="interest" value="3" /> 电影 
</label> 
<input type="hidden" name="interests" value="" /> 

</fieldset> 

<p> 
<input type="submit" value=" 注 册 " /> 
<input type="reset" value=" 重 置 " /> 
<input type="button" value=" 关 闭 " onclick="javascript:window.close 
()7” /> 

</p> 

</form> 


不 同类 型 的 输入 组 件 显示 样式 截然 不 同 ， 在 Web 浏览 器 中 打开 此 Web 页 ， 即 可 查看 
这 些 类 型 的 输入 组 件 显示 的 效果 ， 如 图 2-5 所 示 。 


用 PP 账 P 和 i |] 
监 权 口 令 
重复 口令 | 

男 O 女 
个 人 照片 EE 
兴趣 爱好 

口音 乐 口 小 说 口 电 影 


EE 


图 2-5 不 同类 型 输入 组 件 的 显示 效果 


2.6.4 ”列表 菜单 组 件 


列表 菜单 组 件 是 一 种 特殊 的 选择 性 交互 组 件 ， 其 可 以 为 用 户 提供 一 个 纵 列 的 弹出 菜单 
或 内 嵌 列 表 ， 捕 获 用 户 选择 的 一 个 或 多 个 菜单 项 目 ， 将 其 对 应 的 数据 提交 到 服务 器 中 。 

列表 菜单 组 件 通过 列表 菜单 标记 (SELECT)、 菜 单项 目标 记 (OPTION ) 和 菜单 项 目 
组 标记 (OPTGROUP) 定义 ， 其 结构 为 一 个 列表 菜单 标记 包含 若干 菜单 项 目 组 标记 和 菜单 
项 目标 记 ， 每 个 菜单 项 目 组 标记 下 再 包含 若干 菜单 项 目标 记 。 

1. 列表 菜单 标记 

列表 菜单 标记 (SELECT) 通过 size 属性 定义 其 显示 效果 。 当 size 属性 被 省 略 或 其 属 
性 值 为 1 时 ， 列 表 菜 单 被 Web 浏览 器 显示 为 弹出 式 的 下 拉 菜 单 ; size 属性 值 为 大 于 1 的 整 
数 时 ， 列 表 菜 单 被 显示 为 多 行 的 内 嵌 列 表 ， 通 过 滚动 条 上 下 拖 电 显示 菜单 的 完整 内 容 。 在 
下 面 的 代码 中 ， 就 对 两 个 内 容 一 致 的 列表 菜单 定义 了 不 同 的 size 属性 值 ， 使 其 显示 效果 截 
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然 不 同 。 


<fieldset> 
<legend> 选 择 您 喜欢 的 JS 框架 </legend> 
<select size="3"> 
<option value="jquery">JQuery</option> 
<option value="extjs">ExtJs</option> 
<option value="yui">YUI</option> 
<option value="prototype">Prototype.js</option> 
</select> 
</fieldset> 
<fieldset> 
<legend> 选 择 您 喜欢 的 JS 框架 </legend> 
<select size="1"> 
<option value="jquery">JQuery</option> 
<option value="extjs">ExtJs</option> 
<option value="yui">YUI</option> 
<option value="prototype">Prototype.js</option> 


</select> 
</fieldset> 
在 Web 浏览 器 中 执行 以 上 代码 ， 即 可 查看 两 种 类 型 的 列表 菜单 效果 ， 如 图 2-6 所 示 。 
过 择 您 喜欢 的 JS 框架 
mk 
选择 您 喜欢 的 JS 框架 
Eeey 


图 2-6 两 种 类 型 的 列表 菜单 效果 


其 中 ， 第 一 种 列表 菜单 为 内 嵌 的 通过 滚动 条 控制 的 列表 菜单 ， 第 二 种 则 是 弹出 式 的 下 
拉 菜 单 ， 单 击 其 右 侧 的 箭头 即 可 显示 弹出 效果 。 

当 列表 菜单 被 设置 为 内 嵌 的 菜单 时 ， 开 发 者 可 以 通过 列表 菜单 标记 (SELECT ) 的 
multiple 属性 定义 是 否 允许 用 户 同 时 选择 菜单 中 的 多 项 内 容 。multiple 属性 的 属性 值 只 有 一 
种 ， 即 字符 串 multiple， 当 该 属性 被 省 略 时 ， 默 认定 义 列表 菜单 只 允许 单 选 ， 否 则 列表 菜 
单 将 为 多 选 状态 。 


2. 菜单 项 的 分 组 


菜单 项 目 组 标记 (OPTGROUP) 的 作用 是 对 菜单 项 进行 分 组 ， 使 菜单 项 的 显示 更 加 富 
有 条 理 。 除 此 之 外 ， 还 可 以 对 菜单 项 进行 批量 的 禁用 或 提供 描述 。 菜 单项 组 标记 仅 能 作为 
选择 菜单 标记 (SELECT) 的 子 集 ， 以 及 菜单 项 目标 记 (OPTION) 的 父 集 存在 。 

在 下 面 的 代码 中 ， 就 通过 菜单 项 目 组 标记 (OPTGROUP) 定义 了 一 个 分 组 显示 的 列表 
菜单 。 
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<fieldset> 
<legend>Web 开发 语言 </legend> 
<select size="6"> 
<optgroup label=" 前 端 开发 "> 
<option value ="javascript">Javascript</option> 
<option value ="css">CSS</option> 
<option value ="xhtml">XHTML</option> 
</optgroup> 
<optgroup label=" 后 端 开发 "> 
<option value ="php">PHP</option> 
<option value ="asp">ASP</option> 
</optgroup> 
</select> 
</fieldset> 


通常 情况 下 ，Web 浏览 器 会 对 菜单 项 目 分 组 的 标题 加 粗 顶 格 显示 ， 并 对 被 分 组 的 菜单 
项 目 缩 进 显示 。 在 下 浏览 器 下 ， 以 上 代码 执行 的 效果 如 图 2-7 所 示 。 
Web 开 发 语言 


| 丽 汪 开发 ] 
Javascript = 人 | 
CSS 


XHTML | 
后 端 开 发 。 Y| 
PHP 加 


图 2-7 分 组 的 菜单 项 目 效果 


2.6.5 ”文本 字段 组 件 


文本 字段 组 件 的 作用 是 获取 用 户 输入 的 大 量 文本 内 容 ， 并 提交 到 服务 器 中 ， 其 通过 文 
本 字段 标记 来 实现 效果 。 文 本 字段 标记 的 实例 属性 如 表 2-10 所 示 。 


表 2-10 文本 字段 标记 的 实例 属性 


属性 属性 值 是 否 必 选 ”作用 DTD 
cols 自然 数 是 定义 文本 字段 内 的 可 见 宽度 〈 字 符 宽度 的 整数 倍数 ) 。 STF 
TOWS 自然 数 是 定义 文本 字段 内 的 可 见 行 数 〈 字 符 宽度 的 整数 倍数 ) 。 STF 
disabled disabled 在 定义 该 文本 字段 处 于 禁用 状态 STF 
name 字符 串 耕 定义 提交 表单 时 文本 字段 的 数据 名 称 STF 
readonly readonly 定义 该 文本 字段 处 于 只 读 状 态 STF 


在 默认 情况 下 ， 文 本 字段 标记 不 限制 输入 的 文本 数量 ， 也 不 会 限制 输入 的 行 数 。 开 发 
者 可 以 通过 其 cols 属性 和 rows 属性 定义 文本 字段 标记 能 够 直接 显示 的 列 数 和 行 数 ， 或 通 
过 CSS 样式 表 定 义 文本 字段 标记 精确 的 宽度 和 高 度 。 在 下 面 的 代码 中 ， 就 简单 定义 了 一 个 
包含 默认 值 的 文本 字段 标记 。 

<textarea rows="3" cols="20"> 

请 在 此 处 输入 您 的 简介 。 


</textarea> 
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需要 注意 的 是 ， 由 于 文本 字段 标记 是 通过 其 起 始 标记 和 结束 标记 之 间 的 内 联 文本 作为 
其 提交 服务 器 的 数据 内 容 ， 因 此 在 将 其 数据 提交 服务 器 时 ， 应 随时 注意 去 除数 据 两 侧 的 多 
余 空 格 。 


2.7 小 结 


XHTML 结构 语言 由 HTML 衍生 而 来 ,针对 HTML 的 宽松 语法 导致 的 设备 读 取 过 程 中 
的 种 种 问题 而 设计 ,采纳 了 完全 标准 化 的 XML 风格 ,是 XML 的 一 个 典型 子 集 。 相 比 HTML 
而 言 ， XHTML 的 语法 更 加 严谨 和 严格 ， 更 易 被 各 种 软件 读 取 。 可 以 说 ，XHTML 是 更 加 
规范 的 符合 XML 标准 的 HTML 。 

在 Web 开发 中 , XHTML 占据 重要 的 地 位 ,实际 上 ， 所 谓 的 Web 前 端 开 发 就 是 通过 各 
种 脚本 来 操控 XHTML 代码 实现 的 ,因此 熟练 掌握 XHTML 语言 对 Web 前 端 开发 尤为 重要 。 

承接 本 书 开 篇 ， 本 章 简单 介绍 了 XHTML 结构 语言 的 文档 类 型 、 标 记 、 属 性 、 属 性 值 
和 注释 等 实体 ， 并 分 解 了 XHTML 文档 的 结构 ， 将 各 种 常用 的 XHTML 标记 的 用 法 展示 给 
读者 ， 帮 助 读 者 了 解 Web 页 内 各 种 显示 元 素 是 如 何 编写 而 成 的 。 只 有 深入 了 解 XHTML， 
才能 编写 出 结构 严谨 的 Web 应 用 。 
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XHTML 代码 结构 只 是 构成 了 Web 元 素 本 身 的 内 容 部 分 , 并 非 是 呈现 给 Web 终端 用 户 
的 最 终 效果 。 在 Web 应 用 中 ， 所 有 的 Web 元 素 都 需要 采用 各 种 方式 重新 布局 定位 ， 并 且 
用 多 种 手法 进行 美化 和 修整 ， 才 能 组 合成 为 符合 终端 用 户 审美 观 和 使 用 习惯 的 用 户 界面 。 

在 标准 化 的 Web 开发 中 ， 为 Web 元 素 布局 定位 、 美 化 修整 都 需要 使 用 到 CSS 样式 表 
技术 ， 此 技术 决定 了 Web 应 用 的 显示 效果 ， 以 便 为 终端 用 户 提供 直观 而 方便 的 操作 界面 。 
本 章 将 以 实用 的 角度 介绍 CSS 样式 表 技 术 在 现代 Web 站 点 开发 过 程 中 的 应 用 ， 帮 助 开 发 
者 更 快 地 了 解 CSS 样式 表 技 术 的 原理 和 应 用 的 方式 。 


3.1 结构 和 样式 的 松 耦 合 


传统 的 Web 站 点 和 Web 应 用 往往 采用 旧 的 HTML 内 秆 标记 来 实现 页 面 的 排版 ， 再 通 
过 对 表格 单元 格 的 拆 分 、 合 并 、 修 改 单元 格 的 宽度 和 高 度 实现 布局 。 

这 种 简陋 而 粗糙 的 手法 可 以 做 出 十 分 美观 的 网 站 ， 在 20 世纪 90 年 代 ， 这 种 手法 颇 为 
流行 ， 很 多 图 像 设计 软件 〈 例 如 Adobe Photoshop、Adobe Fireworks 等 ) 甚至 直接 提供 切 
片 工 具 来 辅助 传统 的 网 站 美工 、 艺 术 工作 者 生成 这 类 网 页 。 此 时 ，Web 开发 的 分 工 并 不 明 
确 ， 很 多 中 小 型 Web 站 点 或 Web 应 用 往往 由 学 习 美 术 、 艺 术 专业 的 Web 设计 师 设计 和 
制作 。 

随 着 现代 Web 技术 的 发 展 ， 美 观 已 经 不 再 是 衡量 一 个 Web 站 点 或 Web 应 用 的 唯一 标 
准 ， 一 个 成 功 的 现代 Web 站 点 或 Web 应 用 应 该 且 必 须 符 合 以 下 要 求 。 

。 可 维护 性 、 可 扩展 性 和 前 瞻 性 

。 交互 的 便捷 性 

。 能 够 被 搜索 引擎 快速 抓 取 内 容 

以 上 三 点 要 求 中 ， 可 维护 性 、 可 扩展 性 和 前 瞻 性 决定 了 Web 站 点 和 Web 应 用 是 否 具 
有 快速 更 新 、 修 复 、 改 版 ， 不 断 适 应 用 户 新 需求 和 期 望 的 能 力 ; 交互 的 便捷 性 决定 了 用 户 
的 操作 体验 ;被 搜索 引擎 快速 抓 取 内 容 决 定 了 是 否 能 招揽 更 多 的 终端 用 户 。 

这 三 方面 的 需求 决定 了 传统 的 Web 开发 模式 .HTML 表格 包 打 天 下 的 实现 方式 已 经 不 
再 适合 开发 现代 的 Web 站 点 和 Web 应 用 。 随 着 开发 Web 站 点 的 复杂 度 逐 渐 增加 ， 现 代 的 
Web 设计 和 开发 也 逐渐 分 工 ， 由 传统 的 Web 设计 师 包揽 全 部 工作 转换 为 Web 设计 师 设计 
用 户 界面 ， 前 端 开发 者 完成 前 端 界面 的 开发 和 部 署 。 

基于 以 上 背景 , 现代 的 Web 开发 引入 了 CSS 样式 表 技 术 和 严格 模式 的 XHTML 技术 ， 
将 站 点 的 内 容 和 显示 效果 分 离开 来 ， 使 得 站 点 内 容 的 维护 更 加 便捷 ， 修 改 更 加 迅速 ， 同 时 
也 便于 更 快 地 改版 和 形成 新 的 界面 效果 ， 结 构 化 的 XHTML 更 符合 XML 标准 ， 可 以 更 容 
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易 地 被 搜索 引擎 检索 。 

前 端 开发 结构 和 样式 的 松 耦 合 的 意义 在 于 ， 将 结构 和 表现 完全 从 依赖 关系 上 分 离 出 
来 ， 结 构 即 结构 ， 表 现 即 表现 。 通 过 降低 结构 和 表现 之 间 的 依赖 性 ， 来 提高 整体 Web 代码 
维护 的 效率 。 

具体 到 代码 层级 ， 松 耦合 采用 XHTML 的 严格 型 声明 (Strict Mode) 来 编写 结构 代码 ， 
拒绝 任何 表现 样式 的 HIML 标记 ， 编 写 “ 纯 ”结构 的 数据 。 然 后 通过 XHTML 标记 的 id 
或 class 等 核心 属性 的 值 建立 一 个 完整 的 Web 元 素 关系 表 ， 将 各 种 显示 元 素 的 id 和 class 
整理 记录 。 最 后 根据 Web 元 素 关 系 表 进 行 针对 性 的 Web 元 素 界面 效果 代码 开发 。 

在 对 Web 站 点 或 应 用 的 界面 进行 更 新 时 ， 可 以 针对 Web 元 素 关系 表 直 接 编写 全 新 的 
CSS 样式 表 ， 在 不 改变 结构 的 情况 下 构建 新 的 界面 样式 。 

作为 典型 的 CSS 松 耦 合 推广 站 点 ，CSS 禅 意 花园 (http:/www.csszengarden.com/)， 采 
用 了 完全 规范 化 的 结构 代码 开发 , 并 允许 第 三 方 的 设计 者 为 其 编写 各 式 各 样 的 界面 CSS 代 
码 ， 完 全 实现 了 一 个 站 点 多 种 样式 的 效果 。 


3.2 使 用 样式 表 


所 有 的 CSS 样式 表 必 须 被 XHTML 结构 代码 加 载 , 才能 在 Web 页 中 实现 样式 的 效果 。 
XHTML 结构 语言 支持 三 种 类 型 的 CSS 样式 表 , 即 外 部 样式 表 、 内 部 样式 表 和 内 联 样式 表 。 
通常 情况 下 ， 其 优先 级 为 外 部 样式 表 最 低 ， 内 部 样式 表 其 次 ， 内 联 样式 表 最 高 。 

与 其 他 编程 语言 类 似 ，CSS 支持 通过 注释 的 方式 禁止 某 些 代 码 的 执行 ， 或 为 代码 进行 
解释 和 说 明 。 


3.2.1 外 部 样式 表 


外 部 样式 表 是 指 在 Web 文档 外 部 书写 的 样式 表 ， 其 需要 将 CSS 样式 表 的 代码 书写 到 
外 部 独立 的 扩展 名 为 CSS 的 样式 表 文 件 中 , 然后 再 通过 XHTML 结构 语言 提供 的 LINK 标 
记 将 样式 表 文件 导入 到 Web 文档 中 生效 。 

外 部 样式 表 的 优点 在 于 其 将 各 种 CSS 样式 代码 存储 在 外 部 ， 与 Web 文档 本 身 隔离 ， 
因此 可 以 提高 样式 代码 和 结构 代码 的 独立 性 ， 增 强 样 式 代码 的 复 用 性 ， 实 现 一 段 样式 代码 
应 用 于 多 个 Web 页 。 在 复杂 的 大 型 Web 项 目 开 发 中 ， 多 数 样 式 代码 都 以 外 部 样式 表 的 方 
式 存在 。 

外 部 样式 表 的 缺陷 也 十 分 明显 ， 其 执行 的 优先 级 较 低 ， 经 常会 被 内 部 样式 表 和 内 联 样 
式 表 才 盖 。 另 外 ， 由 于 其 往往 和 多 个 Web 页 关联 ， 因 此 在 开发 和 调试 时 很 可 能 对 其 做 出 的 
任何 修改 都 将 影响 到 所 有 相关 的 Web 页 。 另 外，Web 页 在 加 载 外 部 样式 表 时 需要 占用 一 个 
独立 的 HTTP 线程 ， 因 此 加 载 速度 可 能 会 比 其 他 两 种 样式 表 慢 一 些 。 


1. CSS 样式 表 文 件 
CSS 样式 表 文 件 分 为 两 个 部 分 ， 第 一 部 分 为 编码 声明 ， 第 二 个 部 分 则 为 所 有 样式 的 代 
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码 。 编 码 声明 的 作用 是 向 Web 浏览 器 提供 该 CSS 样式 表 文 件 所 采用 的 语言 编码 ， 如 下 
所 示 。 


Q@charset 'Code' ; 


在 上 面 的 伪 代 码 中 ， 关 键 字 Code 表示 当前 CSS 样式 表 文 件 的 基本 语言 编码 ， 其 可 以 
是 utft8、utf16、gbk、gb2312 等 。 在 此 需要 注意 的 是 ， 编 码 声明 必须 书写 在 CSS 样式 表 
文档 的 第 一 行 ， 且 之 前 不 能 有 任何 其 他 内 容 ， 和 否则 一 些 兼容 性 较 差 的 Web 浏览 器 (例如 
Google 的 Chrome 等 ) 将 无 法 正常 识别 该 CSS 文档 。 
选择 CSS 编码 声明 是 非常 重要 的 ， 通 常情 况 下 建议 选择 utf-8 编码 ， 以 提高 在 不 同 语 
言 版 本 的 Web 浏览 器 中 样式 代码 的 通用 型 。 另外， 不 提倡 在 CSS 代码 中 书写 中 文 (CSS 
的 注释 除外 )， 在 一 些 非 中 文 版 本 的 Web 浏览 器 中 ， 很 可 能 会 无 法 识别 这 些 中 文字 符 。 
在 编码 声明 之 后 ， 开 发 者 即 可 直接 书写 CSS 的 注释 和 普通 代码 ,例如 ， 在 下 面 的 代码 
中 ， 就 展示 了 一 个 简单 CSS 文件 的 内 容 。 
@charset "utf-8' ; 
body { 
margin : 0px ; 
padding : Opx ; 
} 


2. 链接 资源 标记 


在 Web 页 中 ， 外 部 CSS 样式 表 必须 通过 XHTML 结构 语言 的 链接 资源 标记 (LINK) 
才能 正确 地 加 载 。 链 接 资 源 标 记 CLINK) 在 XHTML 1.0 规范 中 被 赋予 了 强大 的 功能 ， 允 
许 将 各 种 类 型 的 外 部 文档 加 载 和 导入 到 当前 文档 中 。 但 是 在 实际 的 应 用 中 ，Web 浏览 器 只 
支持 从 外 部 导入 CSS 样式 表 文档 的 功能 。 

链接 资源 标记 仅 能 出 现在 头 部 标记 (HEAD) 中 ， 且 不 限制 出 现 的 次 数 。 为 Web 页 链 
接 一 个 外 部 样式 表 文 件 的 代码 如 下 所 示 。 

<head> 


<link rel="stylesheet" type="text/css" href="theme.css" /> 
</head> 


除了 以 上 代码 中 的 rel 属性 和 type 属性 外 ， 链 接 资源 标记 还 支持 media 属性 ， 其 作用 
是 根据 用 户 客户 端的 媒体 类 型 ， 决 定 外 部 样式 表 是 否 被 启用 。media 属性 支持 以 下 几 种 属 
性 值 ， 如 表 3-1 所 示 。 
表 3-1 ”链接 资源 标记 支持 的 媒体 类 型 


属性 值 ” 作用 属性 值 ”作用 

screen 定义 外 链 文 档 用 于 PC 显示 器 或 其 他 | ttv 定义 外 链 文 档 用 于 电 传 打字 机 以 及 类 
计算 机 屏幕 似 的 使 用 等 宽 字 符 网 格 的 媒介 

tv 定义 外 链 文档 用 于 电视 机 类 型 设备 | projection ”定义 外 链 文 档 用 于 放映 机 


( 低 分 辩 率 、 有 限 的 深 屏 能 力 ) 
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属性 值 ”作用 作用 

handheld ”定义 外 链 文 档 用 于 手持 设备 (小 屏幕 、 定义 外 链 文 档 用 于 打印 预览 模式 /打印 
有 限 带宽 ) 页 面 

braille 定义 外 链 文 档 用 于 盲人 点 字 法 反馈 定义 外 链 文 档 用 于 语音 合成 器 
设备 

all 定义 外 链 文档 适用 于 所 有 设备 


例如 , 针对 手机 屏幕 加 载 一 个 外 部 的 CSS 文件 , 即 可 为 链接 资源 标记 添加 media 属性 ， 
设置 其 属性 值 为 handheld， 代 码 如 下 。 


<head> 
<link rel="stylesheet" type="text/css" media="handheld" href= 
"styles/handheld/main.css" /> 

</head> 


3.2.2 ”内 部 样式 表 


内 部 样式 表 是 基于 Web 文档 自身 的 一 种 样式 表 存 储 形式 ， 其 特点 是 与 Web 结构 代码 
结合 合十 分 紧密 ， 优先 级 高 天 外 部 样式 表 ， 低 所 内 部 样式 表 。 相 比 外 部 样式 表 ， 内 音 刷 样 式 表 
的 优点 是 加 载 效率 更 高 ， 不 需要 多 占用 一 个 HTTP 联接 下 载 线 程 ， 其 缺点 是 样式 表 代 码 的 
复 用 性 较 差 ， 只 能 应 用 于 当前 的 Web 文档 。 

为 Web 文档 添加 内 部 样式 表 时 ， 需 要 使 用 到 XHTML 结构 语言 的 内 部 样式 标记 
(STYLE)。 内 部 样式 标记 (STYLE) 支持 以 下 属性 ， 如 表 3-2 所 示 。 


表 3-2 内 部 样式 标记 (STYLE) 的 属性 


属性 ”属性 值 是 否 必 选 ”作用 DTD 
type text/css 是 定义 CSS 样式 的 MIME 类 型 STF 
media screen 耕 定义 样式 代码 用 于 PC 显示 器 或 其 他 计算 机 屏幕 STF 
ttv 定义 样式 代码 用 于 电 传 打字 机 以 及 类 似 的 使 用 等 宽 字 符 网 格 的 
媒介 
tv 定义 样式 代码 用 于 电视 机 类 型 设备 〈 低 分 辩 率 、 有 限 的 滚屏 
能 力 ) 
projection 定义 样式 代码 用 于 放映 机 
handheld 定义 样式 代码 用 于 手持 设备 〈 小 屏幕 、 有 限 带宽 
print 定义 样式 代码 用 于 打印 预览 模式 /打印 页 面 
braille 定义 样式 代码 用 于 盲人 点 字 法 反馈 设备 
aural 定义 样式 代码 用 于 语音 合成 器 
all 定义 样式 代码 适用 于 所 有 设备 


内 部 样式 标记 (STYLE) 与 链接 资源 标记 (CLINK) 类 似 ， 都 只 能 书写 在 文档 头 标记 
HEAD 以 内 。 例 如 ， 为 一 个 Web 页 添加 一 段 内 部 样式 代码 ， 代 码 如 下 所 示 。 


<head> 
<style type="text/css"> 
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hl {color:red} 
p {color:blue} 
</style> 
</head> 


如 果 仅 仅 需 要 编写 单独 的 XHTML 文档 ， 可 以 使 用 内 部 样式 标记 ， 而 如 果 是 为 整个 站 
点 的 所 有 Web 页 面 编写 样式 ， 推 荐 采用 链接 资源 标记 CLINK )。 


3.2.3 ”内 联 样式 表 


内 联 样式 也 是 一 种 CSS 样式 的 类 型 ， 其 与 外 部 样式 和 内 部 样式 相 比 ， 优 先 级 更 高 ， 更 
灵活 ， 可 以 和 XHTML 的 各 种 标记 直接 紧密 结合 ， 为 Web 元 素 直接 提供 定义 CSS 样式 的 
接口 。 当 然 ， 其 缺点 也 同样 明显 ， 就 是 需要 针对 每 一 个 XHTML 结构 标记 编写 CSS 代码 ， 
代码 的 复 用 性 更 差 ， 修 改 和 维护 也 更 为 复杂 。 

在 为 XHTML 结构 标记 添加 内 联 样式 时 ， 需 要 使 用 到 其 核心 属性 style， 该 属性 的 属性 
值 为 一 个 长 字符 串 ， 可 以 包含 用 于 描述 该 结构 标记 的 大 量 CSS 样式 代码 。 

例如 ， 为 一 个 段落 定义 段 首 缩 进 、 字 体 、 前 景色 、 字 号 、 行 高 等 样式 ， 代 码 如 下 。 

<p style="color : #fff ; font-family : SimSun , Arial ; font-size : 12px ; 

line-height : 18px ; text-indent : 2em ;"> 

先帝 创业 未 半 而 中 道 骨 碍 ， 今 天 下 三 分 ， 益 州 疲 整 ， 此 诚 危急 存亡 之 秋 也 。 然 侍卫 之 下 不懈 于 内 ， 

忠志 之 士 忘 身 于 外 者 ， 盖 追 先帝 之 殊 遇 ， 和 欲 报 之 于 陛下 也 。 诚 宜 开 张 圣 听 ， 以 光 先 帝 遗 德 ， 恢 弘 志 

士 之 气 ， 不 宜 亡 自 菲 薄 ， 引 喻 失 义 ， 以 塞 忠 谏 之 路 也 。 

<p> 

在 实际 开发 中 , 内 联 样式 由 于 其 复 用 性 差 , 且 维 护 性 比 其 他 两 种 样式 表 的 复杂 度 更 高 ， 
因此 除非 通过 脚本 修改 ， 和 否则 并 不 推荐 一 般 开发 者 使 用 。 


3.2.4 注释 


与 其 他 编程 语言 类 似 , CSS 样式 表 也 支持 注释 功能 , 可 以 帮助 开发 者 禁用 某 一 段 代码 ， 
或 者 为 某 些 代码 提供 文字 说 明 。CSS 提供 两 种 注释 方式 ， 一 种 是 基于 单行 内 容 的 行 注释 ， 
另 一 种 则 是 基于 连续 多 行内 容 的 块 注释 。 

1. 行 注释 


行 注释 的 作用 是 将 当前 行 的 局 部 内 容 注释 ,禁止 Web 浏览 器 对 这 些 内 容 进 行 解析 。CSS 
的 行 注释 需要 使 用 到 双 反 斜 杠 “//” 将 内 容 标记 起 来 ， 例 如 ， 在 下 面 的 代码 中 ， 第 一 行内 
容 就 已 被 行 注释 。 

// 定 义 页 面 主体 内 容 的 间距 

body { 


margin : Opx ; 


$ 
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行 注释 不 仅 可 以 用 于 注释 整 行 内 容 ， 也 可 以 临时 注释 某 一 行内 由 某 个 字符 起 始 直至 行 
尾 的 所 有 内 容 。 例如， 在 下 面 的 代码 中 ， 就 将 代码 块 内 第 二 句 CSS 样式 代码 提升 至 前 一 行 
行 尾 并 实现 了 注释 。 

// 定 义 页 面 主体 内 容 的 间距 

body { 

margin : 0px ; //margin-left : 20px ; margin-top : 10px ; 
padding : 20px ; 

} 


行 注释 适合 为 代码 块 提供 语义 类 型 的 说 明 内 容 , 例如 注释 某 一 段 CSS 代码 在 整个 Web 
页 中 的 功能 和 作用 等 。 在 使 用 行 注释 时 ， 尽 量 注意 用 简短 而 精确 的 文本 实现 代码 的 注释 。 
另外 ， 要 按照 Javascript 代码 的 规范 保障 每 一 行 的 字符 数 不 要 超过 80， 如 果 需 要 注释 的 内 
容 超过 了 80 个 字符 的 限制 ， 则 勿 使 用 行 注释 。 


2. 块 注释 


块 注释 的 作用 是 提供 一 个 开始 标记 和 结束 标记 ， 并 强制 将 标记 内 包含 的 若干 代 得 或 广 
本 注释 起 来 ,禁止 Web 浏览 器 解析 和 执行 。 块 注释 比 行 注释 更 加 自由 灵活 ， 其 起 始 标记 为 
连 写 的 反 斜 杠 “/” 和 星 号 “* ”结束 标记 为 连 写 的 星 号 “*” 和 反 斜 杠 “/"。 

例如 ， 在 下 面 的 代码 中 ， 就 使 用 了 块 注释 来 禁止 Web 浏览 器 解析 一 些 CSS 样式 语句 。 


body { 
margin-left : 20px ; 
/* margin-top : 10px ; 
padding : 20px ; */ 

} 


块 注释 既 可 以 注释 若干 行 代码 ， 也 可 以 注释 一 行 代码 中 的 局 部 内 容 ， 实 现行 注释 的 功 
能 。 例 如 ， 在 下 面 的 代码 中 ， 就 使 用 了 块 注释 注释 局 部 行 的 内 容 。 


号 汉 
margin : Opx Spx ; 
padding : 0px ; 
text-indent : 2em; 
font-size : 12px ; 
font-family : SimSun , Arial ; 
/* font-weight : normal ; */ 
color : #000 ; 
line-height : 1l8px ; 
} 


块 注释 适合 将 若干 行 代码 快速 禁用 ， 也 适合 为 局 部 的 代码 添加 详细 的 多 行 注释 内 容 。 
在 使 用 块 注释 时 , 在 此 同样 推荐 遵循 行 字符 数 80 的 限制 , 以 最 大 限度 保障 各 种 开发 工具 下 
的 浏览 性 能 。 
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3.3 ”选择 Web 元 素 


纯粹 的 XHTML 结构 代码 构成 的 Web 元 素 在 Web 浏览 器 中 显示 的 结果 往往 十 分 粗糙 ， 
因此 需要 开发 者 为 其 建立 CSS 样式 表 , 通过 CSS 样式 表 对 这 些 Web 元 素 进行 排版 、 布 局 、 
美化 ， 赋 予 Web 元 素 各 种 效果 。 

CSS 样式 表 是 一 种 基于 数据 表 的 语言 ， 其 可 以 包含 若干 条 规则 ， 每 一 条 规则 由 选择 器 
语句 和 样式 代码 构成 。 每 一 个 选择 器 语句 对 应 一 段 样式 代码 。 其 中 ， 选 择 器 语句 可 以 是 独 
立 的 基本 选择 器 ， 或 基本 选择 器 与 伪 选 择 器 的 集合 ， 也 可 以 是 若干 基本 选择 器 、 基 本 选择 
器 与 伪 选 择 器 的 集合 共同 构成 的 复合 选择 方法 语句 。 


3.3.1 基本 选择 器 


选择 器 是 CSS 样式 表 的 表 头 ， 是 每 一 条 数据 的 基本 标题 ， 其 本 身 用 于 在 样式 代码 与 对 
应 的 Web 元 素 间 建立 关联 ， 通 过 选择 和 筛选 两 种 方式 帮助 Web 浏览 器 确认 样式 代码 是 否 
应 应 用 到 某 个 Web 元 素 上 。 选 择 器 语句 可 以 是 单独 的 选择 器 代码 ， 也 可 以 是 选择 器 和 伪 类 
选择 器 、 若 干 种 选择 器 的 集合 。 

CSS 样式 表 的 基本 选择 器 包括 标记 选择 器 、 类 选择 器 、ID 选择 器 等 。 


1. 标记 选择 器 
标记 选择 器 是 基于 XHTML 标记 衍生 而 来 的 CSS 选择 器 ， 其 与 Web 页 中 的 某 一 种 
XHTML 标记 紧密 关联 。 定 义 这 些 标记 的 CSS 样式 ， 其 使 用 方法 如 下 所 示 。 


TagName { 
Statements 7 


在 上 面 的 伪 代 码 中 ，TagName 关键 字 表示 XHTML 标记 的 名 称 ，Statements 关键 字 表 
示 定 义 的 CSS 代码 。 在 下 面 的 代码 中 ， 就 采用 了 标记 选择 器 来 定义 Web 页 中 HTML 标记 
以 及 超 链接 标记 A 的 样式 。 

html { 

} 


af 


2. 类 选择 器 


类 选择 器 是 基于 XHTML 标记 的 class 属性 值 产生 的 CSS 选择 器 ， 其 与 Web 页 中 所 有 
class 属性 值 相等 的 Web 元 素 紧密 关联 ， 以 定义 这 些 标 记 的 CSS 样式 。 其 使 用 方法 如 下 
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所 示 。 


-ClassName { 
Statements ; 


在 上 面 的 伪 代 码 中 ，ClassName 关键 字 表 示 对 应 XHTML 标记 的 class 属性 值 ， 
Statements 关键 字 表 示 定 义 的 CSS 代码 。 类 选择 器 的 选择 器 之 前 必须 添加 英文 句点 “.” 以 
将 其 和 其 他 选择 器 区 分 开 来 。 带 有 英文 句点 “.” 的 前 级 也 是 类 选择 器 的 唯一 标识 。 例 如 ， 
在 Web 页 中 存在 以 下 代码 ， 如 下 所 示 。 


<p class="front_color_red"> 这 里 的 字体 以 红色 显示 </p> 
<p class="front_color green"> 这 里 的 字体 以 绿色 显示 </P> 
<p class="front_color_red"> 这 里 的 字体 仍然 以 红色 来 显示 </p> 


在 编写 针对 以 上 代码 的 CSS 样式 时 , 即 可 采用 类 选择 器 的 方式 将 这 些 文本 的 前 景色 区 
分 开 来 ， 代 码 如 下 。 


.front color red { 
color : #f£00 ; 

} 

.front color green { 
color : #0f£0 ; 

} 


类 选择 器 是 CSS 选择 器 中 使 用 最 灵活 的 选择 器 , 其 特性 决定 了 样式 代码 和 XHTML 标 
记 中 的 class 属性 可 以 通过 复合 的 拆 分 组 合 ， 实 现 CSS 样式 的 碎片 化 ， 以 最 简洁 的 代码 实 
现 复 杂 的 样式 。 

例如 ， 以 下 代码 中 每 一 个 标记 仅 包 含 一 个 class 属性 值 ， 代 码 如 下 。 

<p class="front_color red background color _ gray"> 这 里 的 字体 以 红色 显示 ， 背 景 为 

灰色 </p> 

<p class="front_color green background color_gray"> 这 里 的 字体 以 绿色 显示 ,背景 

为 灰色 </p> 

<p class="front_color_red background color white"> 这 里 的 字体 以 红色 显示 ， 背 景 

为 白色 </p> 

<p class="front_color_green background color_white"> 这 里 的 字体 以 绿色 显示 ， 背 

景 为 白色 </p> 


在 编写 针对 以 上 代码 的 CSS 样式 时 , 只 能 针对 每 一 个 标记 编写 完整 的 针对 该 标记 的 样 
式 ， 如 下 所 示 。 


-front color red background color gray { 
color : #f00 ; 
background-color : #eee ; 

} 


.front color green background color gray { 
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color : #0f0 ; 
background-color : #eee ; 

} 

-front color red background color white { 
color : #f£00 ; 
background-color : #fff ; 

} 

.front color green background color white { 
color : #0f0 ; 
background-color : #fff ; 

} 


上 面 的 代码 中 ,每 条 CSS 代码 都 必须 包含 两 种 属性 ， 这 种 写法 效率 较 低 ， 同 时 也 比较 
繁 元 。 在 实际 开发 中 ， 完 全 可 以 采用 碎片 化 的 方式 编写 XHTML 代码 ， 为 其 赋予 多 个 class 
属性 ， 然 后 针对 每 一 个 class 属性 编写 更 简洁 的 CSS 代码 ， 如 下 所 示 。 


<p class="front_color red background_ color gray"> 这 里 的 字体 以 红色 显示 ， 背 景 为 
灰色 </p> 

<p class="front color green background color gray"> 这 里 的 字体 以 绿色 显示 ， 背 景 
为 灰色 </p> 

<p class="front_color_red background color white"> 这 里 的 字体 以 红色 显示 ， 背 景 
为 白色 </p> 

<p class="front_color_green background_color_white"> 这 里 的 字体 以 绿色 显示 ， 背 
景 为 白色 </p> 


在 编写 针对 以 上 代码 的 CSS 样式 时 , 则 可 以 只 编写 单条 定义 前 景色 或 背景 色 的 样式 代 
码 ， 如 下 所 示 。 


.front color red { 
color : #f£00 ; 
. 
.front color green { 
color : #0f0 ; 
} 
-background color gray { 
background-color : #eee ; 
} 
-background color white { 
background-color : #fff ; 
} 


碎片 化 的 CSS 样式 代码 更 加 简洁 ， 其 选择 器 和 代码 含义 的 关联 也 更 加 直接 ,因此 在 开 
发 过 程 中 ， 推 荐 采用 这 种 方式 以 提高 代码 的 效率 。 


3. ID 选择 器 
ID 选择 器 是 基于 XHTML 标记 的 id 属性 值 产生 的 CSS 选择 器 。 在 XHTML 标准 中 ， 
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一 个 Web 页 内 所 有 XHTML 标记 的 id 属性 值 是 不 能 重复 的 ， 即 一 个 XHTML 标记 的 id 属 
性 值 如 果 为 “a”, 则 其 他 任何 XHTML 标记 的 id 属性 值 都 不 能 再 是 “a”。 基于 此 特点 , CSS 
的 ID 选择 器 可 以 为 Web 页 中 某 一 个 唯一 的 元 素 定义 CSS 样式 .ID 选择 器 的 使 用 方法 如 下 
所 示 。 


#ID { 
Statements ; 


了 


在 上 面 的 伪 代 码 中 ,ID 关键 字 表 示 对 应 XHTML 标记 的 id 属性 ，Statements 关键 字 表 
示 定 义 的 CSS 语句 。ID 选择 器 的 选择 器 之 前 必须 添加 符号 “# ”以 将 其 和 其 他 选择 器 区 分 
开 来 。 带 有 符号 “#” 前缀 也 是 ID 选择 器 的 唯一 标识 。 例 如 ， 在 一 个 Web 页 中 ， 包 含 以 下 
模块 ， 代 码 如 下 。 


<div id="header"></div> 
<div id="nav"></div> 
<div id="content"></div> 
<div id="aside"></div> 
<div id="footer"></div> 


使 用 CSS 的 ID 选择 器 ， 可 以 方便 地 为 这 些 模块 定义 针对 性 的 CSS 样式 ， 代 码 如 下 


#header { 
i 

#nav { 

i 

#content { 
} 

#aside { 

} 

#footer { 

} 


3.3.2” 伪 选择 器 


伪 选 择 器 是 一 种 特殊 的 选择 器 ， 其 与 普通 选择 器 的 区 别 在 于 ， 普 通 选择 器 必须 与 一 个 
实际 存在 的 XHTML 标记 相关 联 ， 而 伪 选 择 器 则 不 需要 与 任何 实际 的 XHTML 标记 关联 。 

1 伪 类 选择 器 

伪 类 选择 器 是 一 种 典型 的 伪 选 择 器 ， 其 必须 和 标记 选择 器 、 类 选择 器 或 ID 选择 器 结合 
使 用 ， 用 于 定义 这 些 选 择 器 所 指定 XHTML 标记 的 一 些 特殊 显示 状态 。 


CSS 2.1 标准 提供 了 五 种 基本 伪 类 选择 器 ， 分 别 对 应 XHTML 标记 (主要 是 超 链 接 标 
记 A) 的 五 种 状态 ， 如 表 3-3 所 示 。 
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表 3-3 基本 伪 类 选择 器 


伪 类 选择 器 作用 应 用 对 象 

:hover 定义 标记 在 鼠标 悬 停 状 态 下 的 效果 所 有 显示 对 象 的 XHTML 标记 
:link 定义 标记 为 超 链接 状态 下 的 效果 超 链 接 标 记 A 

:focus 定义 标记 在 获取 焦点 后 的 效果 超 链接 标记 A 

:visited 定义 标记 为 超 链接 且 已 被 访问 过 时 的 效果 超 链接 标记 A 

:active 定义 标记 在 选 定 状 态 下 的 效果 超 链接 标记 A 


通常 情况 下 ， 伪 类 选择 器 需要 和 其 他 选择 器 配合 使 用 ， 作 为 后 绥 追 加 到 其 他 选择 器 之 
后 ， 其 使 用 方法 如 下 所 示 。 
Selector:Pseudo-Selector { 


Statements ; 


} 


在 上 面 的 伪 代 码 中 ，Selector 关键 字 表示 普通 的 选择 器 ， 其 可 以 是 标记 选择 器 、 类 选 
择 器 或 ID 选择 器 ;Pseudo-Selector 关键 字 表示 伪 类 选择 器 ，Statements 关键 字 表 示 定 义 该 
选择 器 的 CSS 语句 。 

所 有 伪 选 择 器 都 必须 添加 英文 冒号 “:” 以 和 其 他 选择 器 分 隔 。 例 如 ， 定 义 一 个 页 面 中 
所 有 的 超 链接 状态 样式 ， 可 以 将 标记 选择 器 与 伪 类 选择 器 配合 使 有 用， 代码 如 下 。 


:hover { 


:link { 


:active { 


a 
} 

a 

} 
a:visited { 
} 

a 

} 

a:focus { 

. 

在 早期 的 Web 浏览 器 中 ， 伪 类 选择 器 仅 能 对 超 链接 标记 A 发 生 作 用 ， 但 现代 的 Web 
浏览 器 已 经 不 再 对 伪 类 选择 器 进行 限制 , 因此 , 绝 大 多 数 Web 显示 对 象 的 XHTML 标记 都 
可 以 使 用 :hover” 的 伪 类 选择 器 定义 鼠标 悬 停 样式 。 另 外 , 所 有 正 浏览 器 均 不 支持 “:focus” 

除了 以 上 五 种 基本 伪 类 选择 器 之 外 ，CSS 2.1 还 支持 两 种 用 于 筛选 的 伪 类 选择 器 ， 即 
“first-child” 和 “:lang()” 伪 类 选择 器 。 

。 “:first-child” 伪 类 选择 器 

“:first-child” 为 首 元 素 选 择 器 ， 用 于 第 选 若 干 符合 选择 器 规则 的 XHTML 元 素 的 第 一 
个 元 素 。 例 如 ， 在 如 下 的 XHTML 结构 中 ， 包 含 了 多 个 列表 项 目标 记 LI， 代 码 如 下 。 

<ul> 

<1i>--==Data List==--</1i> 
<li>Data 1</1i> 
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<li>Data 2</1i> 
<li>Data 3</1i> 
</ul> 


如 需要 针对 以 上 代码 编写 CSS 样式 , 设置 第 一 个 列表 项 目 加 粗 显示 ， 即 可 使 用 首 元 素 
选择 器 ， 代 码 如 下 。 


li:first-child { 
font-weight : bold : 


所 有 主流 Web 浏览 器 都 支持 首 元 素 选择 器 , 但 仅 当 XHTML 文档 具有 正确 的 文档 类 型 
声明 时 ， 首 元 素 选择 器 才 为 正 浏览 器 所 支持 。 

。 “:lang0” 伪 类 选择 器 

“:lang0 ”为 语言 选择 器 , 用 于 在 多 语言 页 面 根据 XHTML 标记 的 lang 属性 筛选 不 同 语 
言 的 标记 内 容 ， 其 后 的 括号 内 用 于 书写 XHTML 标记 的 lang 属性 值 。 例如， 在 以 下 的 代码 
中 包含 两 个 文本 段落 ， 一 段 为 英文 一 段 为 中 文 ， 代 码 如 下 。 

<p lang="en">The quick brown fox jumps over the lazy dog.</p> 

<p lang="cn"> 敏 捷 的 棕 毛 狐 狸 从 懒 狗 身上 跃 过 。</p> 


在 针对 以 上 代码 编写 CSS 时 ， 即 可 使 用 语言 选择 器 根据 语言 筛选 样式 ， 代 码 如 下 。 


p:lang (en){ 
下 
p:lang (cn){ 
} 


所 有 主流 的 Web 浏览 器 都 支持 语言 选择 器 , 但 仅 当 XHTML 文档 具有 正确 的 文档 类 型 
声明 时 ， 语 言 选 择 嚣 才 为 正 浏览 器 所 支持 。 


2. 伪 对 象 选择 器 


伪 对 象 选 择 器 也 是 一 种 伪 选 择 器 ， 其 与 伪 类 选择 器 的 区 别 在 于 ， 伪 类 选择 器 用 于 根据 
对 象 的 状态 定义 其 样式 效果 ， 而 伪 对 象 选择 器 则 用 于 根据 对 和 象 内 部 的 局 部 元 素 定义 其 样式 
效果 。CSS 2.1 支持 四 种 伪 对 象 选择 器 ， 如 表 3-4 所 示 。 


表 3-4 伪 对 象 选 择 器 


伪 对 象 选择 器 ”作用 伪 对 象 选择 器 ” 作用 
:first-letter 定义 文本 的 第 一 个 字符 样式 :before 定义 对 象 之 前 内 容 的 样式 
:first-line 定义 文本 的 首 行 样式 :after 定义 对 象 之 后 内 容 的 样式 


伪 对 象 选 择 器 的 使 用 方式 与 伪 类 选择 器 基本 一 致 ， 在 此 不 青 袭 述 。 


3.3.3 选择 器 的 优先 级 


优先 级 是 计算 机 开发 的 一 个 术语 ， 其 规定 了 计算 机 程序 处 理 数据 时 的 处 理 顺 序 。CSS 
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样式 表 是 一 种 行 解析 的 编程 语言 ，Web 浏览 器 在 解析 CSS 样式 表 时 ， 以 自 上 而 下 的 顺序 逐 
行 判读 ， 根 据 行 的 顺序 将 CSS 样式 表 所 描述 的 效果 应 用 到 Web 页 的 XHTML 对 象 上 。 

在 默认 的 状态 下 ，CSS 样式 表 越 新 〈 在 代码 文件 中 处 于 较为 靠 后 的 位 置 ) 则 其 优先 
级 越 高 ， 反 之 ， 则 优先 级 较 低 。 这 种 优先 级 排序 被 称 为 默认 优先 级 。 除 此 之 外 ， 不 同类 型 
的 选择 器 在 Web 浏览 器 中 的 处 理 优先 级 是 有 所 区 别 的 。Web 浏览 器 在 解析 这 些 选 择 器 时 ， 
还 会 依照 选择 器 的 履 盖 选择 范围 对 样式 代码 的 优先 级 进行 修正 。 通 常情 况 下， 选择 器 禾 盖 
选择 范围 越 广 ， 则 优先 级 越 低 。 

在 三 种 基本 选择 器 中 ， 标 记 选 择 器 被 认为 是 履 盖 范围 最 广 的 选择 器 ， 其 可 应 用 于 Web 
页 中 所 有 对 应 的 标记 ， 因 此 优先 级 最 低 ， 类 选择 器 作为 标记 若干 分 类 的 选择 器 ， 优 先 级 比 
标记 选择 器 高 一 些 ; ID 选择 器 只 针对 某 一 个 XHTML 对 象 ， 优先 级 最 高 。 三 种 基本 选择 器 
的 优先 级 公式 如 下 所 示 。 


标记 选择 器 < 类 选择 器 <ID 选择 器 
如 果 一 个 XHTML 标记 拥有 多 个 class 属性 值 ， 符 合 多 个 类 选择 器 的 CSS 样式 匹配 ， 
则 Web 浏览 器 将 以 加 载 的 最 后 一 个 类 选择 器 样式 为 准 。 
例如 ， 在 下 面 的 代码 中 ，XHTML 的 超 链 接 标 记 A 既 包 含 id 属性 ， 也 包含 多 个 class 
属性 。 


<a href="http://www.baidu.com" title=" 百 度 一 下 ， 你 就 知道 " idq="baidu link" 
class="nav_link hyper_link"> 百 度 </a> 


针对 上 面 的 代码 ， 可 以 编写 四 条 CSS 样式 规则 ， 代 码 如 下 。 


#baidu link { 
color : #000 ; 
} 
-nav_link { 
color : #0f0 ; 
} 
-hyper link { 
color : #00f ; 
} 
al{ 
color : #f£00 ; 
} 


在 上 面 的 代码 中 ，ID 选择 器 “#baidu_link” 的 样式 规则 优先 级 最 高 ， 因 此 无 论 如 何 调 
整 这 四 条 CSS 样式 规则 的 顺序 ， 超 链接 标记 A 最 终 显示 的 都 是 黑色 (#000)。 如 果 删 除 ID 
选择 器 “#baidu_link” 的 样式 规则 ， 则 类 选择 器 “.nav_link” 和 “.hyper_link” 中 以 最 后 一 
条 的 样式 效果 为 准 ， 超 链接 标记 A 默认 显示 为 蓝 色 。 仅 有 当 ID 选择 器 “#baidu_link”、 类 
选择 器 “.nav_link” 和 “.hyper link” 都 被 删除 的 情况 下 ， 超 链接 A 才 会 显示 为 红色 。 


3.3.4 选择 方法 


选择 方法 是 指使 用 多 种 选择 器 对 XHTML 对 象 进行 组 合 选择 ， 实 现 精确 的 选择 器 匹配 
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的 使 用 方法 。 在 CSS 2.1 标准 中 ， 支 持 对 选择 器 进行 分 组 、 派 生 等 复合 操作 ， 同 时 也 支持 
对 XHTML 对 象 以 全 局 通配符 的 方式 匹配 。 除 以 上 常用 的 三 种 选择 方法 外 ，CSS 2.1 还 支 
持 交 叉 派 生 选 择 、 交 叉 相 邻 选择 以 及 属性 匹配 选择 等 ， 这 些 选 择 方法 并 不 常用 ， 在 此 不 再 


1. 分 组 选择 


分 组 选择 方法 是 指 当 多 个 XHTML 对 象 需要 定义 相同 的 CSS 样式 时 ， 对 这 些 CSS 样 
式 进 行 合并 而 产生 的 一 种 复合 选择 方法 。 其 特点 在 于 允许 用 一 组 CSS 样式 规则 定义 多 个 不 
同类 型 、 多 种 标记 或 多 个 符合 指定 ID 的 XHTML 对 象 。 

在 使 用 分 组 选择 方法 时 ， 需 要 将 若干 CSS 选择 器 合并 为 一 个 复合 选择 器 ， 被 合并 的 
CSS 选择 器 之 间 用 英文 逗号 “.” 隔 开 ， 如 下 所 示 。 


Selector1l , Selector2 ，Selector3 { 
Statements ; 


} 


在 上 面 的 伪 代 码 中 ，Selectorl 、Selector2 和 Selector3 等 关键 字 用 于 表示 分 组 选择 的 三 
种 选择 器 或 选择 器 与 伪 类 选择 器 的 组 合 ，Statements 关键 字 表示 描述 的 CSS 代码 。 例 如 ， 
同时 定义 Web 页 中 的 6 种 标题 标记 的 CSS 样式 ， 设 置 其 前 景色 为 红色 ， 代 码 如 下 所 示 。 
前 、 丽 和 
color : #f00 ; 
} 


上 面 的 代码 中 ，CSS 复合 选择 器 由 6 种 标记 选择 器 组 成 ， 每 个 标记 选择 器 之 间 都 使 用 
了 逗号 “,” 作 为 分 隔 符 。 在 将 这 段 CSS 代码 添加 到 Web 页 之 后 ， 所 有 一 级 标题 标记 H1、 
二 级 标题 标记 H2、 三 级 标题 标记 H3、 四 级 标题 标记 H4、 五 级 标题 标记 H5 和 六 级 标题 标 
记 H6 都 将 被 应 用 该 样式 。 

2. 派生 选择 


派生 选择 方法 是 一 种 依照 XHTML 对 象 的 嵌 套 关系 来 定义 的 选择 方法 ， 其 特点 是 可 以 
精确 地 定义 指定 位 置 XHTML 对 象 的 CSS 样式 。 在 使 用 派生 选择 方法 时 ， 需 要 了 解 被 定义 
的 XHTML 对 象 的 精确 嵌 套 结构 ， 通 过 XHTML 对 象 的 嵌 套 结构 来 决定 派生 选择 的 选择 器 
序列 ， 其 使 用 方法 如 下 所 示 。 


Selector1l Selector2 Selector3 { 
Statements ; 


F 


在 上 面 的 伪 代 码 中 ，Selectorl 、Selector2 和 Selector3 等 关键 字 用 于 表示 派生 选择 的 三 
种 选择 器 或 选择 器 与 伪 类 选择 器 的 组 合 ，Statements 关键 字 表示 描述 的 CSS 代码 。 如 果 确 
定 三 种 选择 器 或 选择 器 与 伪 类 选择 器 的 组 合 嵌 套 结构 为 Selectorl 包含 Selector2，Selector2 
包含 Selector3， 则 这 种 派生 的 关系 即 被 Web 浏览 器 判定 为 有 效 。 
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例如 ， 在 下 面 的 代码 中 ， 存 在 两 个 超 链接 标记 A， 其 分 别 嵌 套 于 不 同 的 XHTML 结 
构 中 。 


<div id="header"> 
<ul class="top nav list"> 
<li class="top nav element"> 
<a href="about .php” title=" 关 于 我 们 "> 关于 我 们 </a> 
</1i> 


<div id="nav"> 
<ul class="nav list"> 
<li class="nav element"> 
<a href="index.php" title=" 网 站 首页 "> 网 站 首页 </a> 
/i> 


在 上 面 的 代码 中 包含 了 两 个 不 同 的 超 链接 标记 A, 这 两 个 超 链接 标记 A 分 别 被 嵌 套 于 
不 同 的 无 序列 表 标 记 UL 中 。 如 果 直 接 使 用 标记 选择 器 定义 其 样式 ， 则 两 个 超 链接 标记 A 
都 将 被 应 用 样式 ， 如 需要 分 别 定义 这 两 个 超 链接 标记 A 的 样式 ， 就 必须 使 用 派生 选择 器 ， 
如 下 所 示 。 
#header .top nav list .top nav element a { 
color : #f£00 ; 
} 
#nav .nav_ list .nav element af 
color : #0f£0 ; 
} 


派生 选择 的 特点 是 根据 XHTML 元 素 所 在 Web 页 的 代码 结构 , 依次 排列 其 父 元 素 对 应 
的 选择 器 ， 每 个 选择 器 之 间 以 空格 隔 开 。 使 用 派生 选择 ， 可 以 方便 地 定义 位 于 不 同位 置 的 
Web 元 素 的 样式 。 


3. 全 局 匹配 


全 局 匹配 是 指 在 CSS 选择 方法 中 ， 使 用 全 局 匹配 符号 “* ”来 匹配 指定 层级 下 的 任意 
XHTML 标记 ， 包 括 这 些 XHTML 标记 的 自 标记 等 。 全 局 匹配 可 以 快速 地 将 某 个 层级 下 所 
有 的 XHTML 标记 筛选 出 来 ， 然 后 再 供 开发 者 为 其 定义 统一 的 样式 。 

例如 ， 需 要 匹配 整个 Web 文档 中 的 所 有 标记 ， 设 置 其 最 小 高 度 为 0， 开 发 者 可 以 直接 
用 全 局 匹配 符号 “* ”定义 CSS 样式 ， 代 码 如 下 。 


六 


min-height : 0 > 
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在 将 上 面 的 代码 添加 到 CSS 样式 表 后 ， 开 发 者 即 可 定义 整个 Web 文档 内 所 有 的 
XHTML 标记 的 最 小 高 度 。 

全 局 匹配 的 优点 在 于 其 使 用 简单 ， 只 需 很 少 的 代码 即 可 定义 大 量 Web 元 素 的 样式 ， 其 
缺点 也 同样 突出 ， 由 于 其 一 次 性 操作 的 Web 元 素 较 多 ， 因 此 可 能 会 降低 整个 页 面 的 泻 染 速 
度 。 同 时 ， 对 整个 页 面 中 所 有 Web 元 素 统一 定义 样式 的 意义 往往 也 并 不 大 (全 局 泻 染 灰 度 
除外 )。 因 此 ， 多 数 开发 者 往往 将 其 余 派生 选择 方法 结合 使 用 ， 对 局 部 的 Web 元 素 进行 订 
制 ， 在 开发 效率 和 泻 染 速 度 之 间 取 得 一 个 平衡 。 

例如 ，Web 文档 中 存在 一 个 定义 列表 UL, 该 列表 中 存放 有 若干 定义 词 条 DT 和 定义 解 
释 DD， 代 码 如 下 。 

<dl class="library" id="library"> 

<dt>jQuery</dt> 

<dd><!-- **--></dd> 

<dt>YUI Library</dt> 

<dd><!-— ……--></dd> 
</dl> 


如 果 开 发 者 需要 设置 所 有 定义 词 条 DT 和 定义 解释 DD 的 样式 ， 即 可 通过 全 局 匹配 符 
号 “*” 与 派生 选择 方法 结合 使 用 ， 代 码 如 下 。 
#1library * { 
A 
} 


3.4 属性 和 属性 值 


在 使 用 选择 器 和 选择 方法 对 Web 元 素 进行 匹配 后 ， 即 可 使 用 CSS 的 样式 代码 ， 定 义 
Web 元 素 的 具体 样式 。 


3.4.1 样式 代码 的 写 ; 


CSS 的 样式 代码 通常 是 一 个 集合 ， 其 由 若干 属性 和 属性 值 组 成 的 样式 语句 构成 ， 每 一 
句 样 式 语 句 都 应 包含 一 个 CSS 属性 ， 以 及 若干 CSS 属性 值 。 

属性 规定 了 CSS 规则 所 需要 描述 的 XHTML 对象 某 一 方面 的 性 状 , 例如 XHTML 对 象 
的 宽度 、 高 度 、 边 框 、 补 白 等 都 属于 属性 定义 的 范畴 ，CSS 2.1 规范 了 近 百 种 CSS 属性 ， 
其 中 绝 大 多 数 属性 已 被 所 有 现代 主流 的 Web 浏览 器 所 支持 。 

根据 CSS 属性 的 定义 的 样式 类 型 ， 可 以 将 其 划分 为 背景 属性 、 边 框 属性 、 文 本 属性 、 
字体 属性 、 边 距 属 性 、 补 白 属性 、 列 表 属 性 、 内 容 属 性 、 尺 寸 属 性 、 定 位 属性 、 打 印 属性 
和 表格 属性 等 。 

属性 值 是 对 属性 的 描述 和 定义 ,其 内 容 和 格式 与 属性 的 类 型 息息相关 .CSS 属性 和 CSS 
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属性 值 以 冒号 “:” 隔 开 。 单 名 的 CSS 语句 写法 如 下 所 示 。 
Property : Value ; 


在 上 面 的 伪 代 码 中 ，Property 关键 字 表 示 CSS 的 属性 ，Value 关键 字 则 表示 对 应 属性 
的 属性 值 。 一 些 特殊 的 CSS 属性 往往 可 以 包含 多 个 CSS 属性 值 ， 此 时 ， 这 些 属 性 值 通常 
以 空格 隔 开 ， 如 下 所 示 。 


Property : Valuel Value2 Value3 ; 


在 上 面 的 伪 代 码 中 ，Property 关键 字 表 示 CSS 的 属性 ，Valuel、Value2 和 Value3 等 关 
键 字 表 示 该 属性 的 多 个 属性 值 。 

当 一 个 CSS 选择 器 或 选择 器 的 组 合 只 对 应 一 条 CSS 属性 时 ， 末 尾 的 英文 分 号 “;” 可 
以 省 略 。 而 如 果 该 CSS 选择 器 或 选择 器 的 组 合 对 应 多 条 CSS 属性 时 ， 除 了 最 后 一 条 外 ， 
其 他 的 CSS 属性 与 属性 值 语句 末尾 的 英文 分 号 “;” 都 不 可 省 略 ， 如 下 所 示 。 

Propertyl : Valuel ; 


Property2 : Value2 ; 
Property3 : Value3 


在 上 面 的 伪 代 码 中 ，Propertyl 、Property2 和 Property3 等 关键 字 表示 三 个 CSS 属性 ， 
Valuel、Value2 和 Value3 等 关键 字 表 示 之 前 三 个 CSS 属性 对 应 的 属性 值 。 

例如 ， 定 义 一 个 Web 元 素 的 文本 前 景色 为 红色 ， 其 属性 为 color， 属 性 值 可 为 red， 代 
码 如 下 所 示 。 


Color : red; 

如 果 需 要 定义 某 个 Web 元 素 的 边框 线 为 黑色 一 像素 实 线 , 则 可 以 使 用 多 个 属性 值 的 方 
式 定义 ， 如 下 所 示 。 

border : lpx solid #000 ; 


而 在 定义 某 个 Web 元 素 的 文本 前 景色 为 红色 的 同时 定义 其 背景 色 为 黑色 ， 代 码 如 下 
所 示 。 


color : red ; 


background-color : black ; 


3.4.2 属性 值 的 类 型 


属性 值 定义 了 CSS 规则 的 具体 效果 程度 , 例如 XHTML 对 象 各 种 属性 的 具体 尺寸 、 颜 
色 、 显 示 方 式 等 ， 都 属于 属性 值 定义 的 范畴 。 通 常 来 讲 ，CSS 的 基本 属性 值 分 为 颜色 值 、 
绝对 长 度 值 、 相 对 长 度 值 、URL 以 及 英文 关键 字 等 。 


1. 颜色 值 
颜色 值 通常 用 于 描述 各 种 XHTML 对象 的 文本 前 景色 和 背景 色 ，CSS 支持 四 种 表示 颜 
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色 的 方式 ， 即 十 六 进 制 数字 、 颜 色 英 文 名 称 、 百 分 比 数字 函数 和 十 进 制 数字 函数 等 。 
。 十 六 进 制 数字 
十 六 进 制 数字 取 色 法 是 网 页 中 最 常用 的 取 色 方法 ， 其 格式 如 下 所 示 。 


color:#RRGGBB; 


RR、GG 和 BB 都 是 两 位 的 十 六 进 制 数字 。RR 代表 对 象 颜色 中 红色 的 深度 ，GG 代表 
对 象 颜色 中 绿色 的 深度 ， 而 BB 则 代表 对 象 颜色 中 蓝 色 的 深度 。 通 过 描述 这 3 种 颜色 〈3 
原色 ) ， 即 可 组 合 出 目前 可 在 显示 器 中 显示 的 1600 多 万 种 颜色 。 例 如 ， 白 色 即 
“#Hfffff”， 红 色 即 “#EE0000”， 黑 色 即 “#000000”。 

当 表 示 每 种 原色 的 两 位 十 六 进 制 数字 相同 时 ， 可 将 其 缩写 为 一 位 。 例 如 ， 颜 色 
“#ff6677” 可 缩写 为 “#f67”。 

。 颜色 英文 名 称 

颜色 的 英文 名 称 也 是 一 种 较为 直观 的 颜色 表示 方法 ,通常 情况 下 ， 开 发 者 可 以 使 用 17 
种 颜色 名 称 来 表示 各 种 基本 的 颜色 ， 如 表 3-5 所 示 。 


表 3-5 17 种 颜色 名 称 和 对 应 的 十 六 进 制 数字 表示 法 


英文 名 称 中 文 名称 十 六 进 制 颜色 | 英文 名 称 中 文 名称 十 六 进 制 颜色 
black 黑色 #000000 white 白色 #ffffff 

red 红色 #ff0000 yellow 黄色 #ffFF00 

lime 浅 绿 #00ff00 aqua 天 蓝 #OOffff 

blue 蓝 色 #0000ff fuchsia 品 红 #ff00ff 

gray 深 灰 #808080 silver 银灰 #c0cOcO 
maroon 深 红 #800000 olive 褐 黄 #808000 
green 深 绿 #008000 teal 胡 青 #008080 

navy 深蓝 #000080 purple 深 紫 #800080 
transparent 透明 - 


除 以 上 17 种 颜色 外 , 微软 公司 的 下 系列 Web 浏览 器 还 支持 对 另外 140 余 种 颜色 以 英 
文 名 称 的 方式 表示 。 在 使 用 颜色 的 英文 名 称 来 表述 颜色 时 需要 注意 , 不 同 的 Web 浏览 器 在 
识别 这 些 名 称 时 , 解析 的 结果 可 能 有 所 区 别 。 一 些 早期 的 Web 浏览 器 会 以 不 正确 的 方式 解 
析 颜 色 ， 因 此 ， 在 此 并 不 推荐 大 范围 使 用 英文 名 称 表示 颜色 。 

。 百分比 数字 函数 

百分比 数字 函数 也 是 一 种 常见 的 颜色 表示 方式 。 其 原理 是 将 色彩 的 深度 以 百分比 的 
形式 来 表示 ， 其 使 用 方法 如 下 所 示 。 


color:rgb(100%,100%,100%); 


在 百分比 颜色 表示 方式 中 ， 第 一 个 值 为 红色 ， 第 二 个 值 为 绿色 ， 第 三 个 值 为 蓝 色 。 
色彩 的 百分比 越 大 ， 则 其 色彩 深度 越 大 。 

。 十 进 制 数字 函数 

十 进 制 数字 表示 法 其 原理 和 百分比 表示 法 相同 ， 都 是 通过 描述 数字 的 大 小 来 控制 颜 
色 的 深度 。 其 书写 格式 也 与 百分比 表示 法 类 似 ， 如 下 所 示 。 
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Colorsroqbt255,.255,255)3 

十 进 制 数字 表示 法 表示 颜色 的 数值 范围 为 0 到 255， 数 值 越 大 ， 则 该 颜色 的 色 深 也 就 
越 大 。 

2. 绝对 长 度 值 

绝对 长 度 值 是 指 在 设计 中 使 用 的 衡量 物体 在 实际 环境 中 长 度 、 面 积 、 大 小 等 度量 单 
位 。 通 常情 况 下 其 很 少 在 网 页 中 使 用 ， 常 用 于 实体 印刷 中 。 但 是 在 一 些 特殊 的 场合 ， 使 用 
绝对 单位 是 非常 必要 的 。 

在 CSS2.1 的 规范 中 ， 绝 对 长 度 值 允许 以 下 五 种 单位 ， 如 表 3-6 所 示 。 


表 3-6 绝对 长 度 值 单位 


英文 名 称 中文 名 称 ”说 明 


in 英寸 在 设计 中 使 用 最 广泛 的 长 度 单位 

cm 厘米 在 生活 中 使 用 最 广泛 的 长 度 单位 

mm 毫米 在 研究 领域 使 用 较 广泛 的 长 度 单位 

pt 磅 在 印刷 领域 使 用 非常 广泛 ,也 称 点 , 其 在 CSS 中 的 应 用 主要 用 于 表示 字体 的 
大 小 

pe 皮 咱 在 印刷 领域 经 常 使 用 ，1 皮 咱 等 于 12 磅 ， 所 以 也 称 12 点 活字 


3. 相对 长 度 值 


相对 长 度 值 与 绝对 长 度 值 相 比 ， 其 在 Web 开发 中 应 用 更 加 广泛 ， 但 会 受到 Web 应 用 
输出 的 显示 屏幕 因素 的 影响 ， 影 响 因 素 包 括 屏幕 分 辨 率 、 屏 幕 可 视 区 域 、 浏 览 器 设置 和 相 
关 元 素 的 大 小 等 。CSS 2.1 支持 以 下 几 种 相对 长 度 单 位 ， 如 下 所 示 。 

® em 

em 单位 表示 字体 对 象 的 行 高 。 其 能 够 根据 字体 的 大 小 属性 值 来 确定 大 小 。 例 如 ， 当 设 
置 字体 为 12px 时 ，1 个 em 就 等 于 12px。 如 果 网 页 中 未 确定 字体 大 小 值 ， 则 em 的 单位 高 
度 根 据 浏 览 器 默认 的 字体 大 小 来 确定 。 在 正 浏览 器 中 ， 默 认 字体 高 度 为 16px。 

ex 是 衡量 小 写字 母 在 网 页 中 的 大 小 的 单位 。 其 通常 根据 所 使 用 的 字体 中 小 写字 母 x 的 
高 度 作 为 参考 。 在 实际 使 用 中 ， 浏 览 器 将 通过 em 的 值 除 以 2 以 得 到 ex 值 。 

® px 

px 就 是 像素 ， 是 显示 器 屏幕 中 最 小 的 基本 单位 。px 是 网 页 和 平面 设计 中 最 常见 的 单 
位 ， 其 取 值 是 根据 显示 器 的 分 辩 率 来 设计 的 。 

。 百分比 

百分比 也 是 一 个 相对 单位 值 ， 其 必须 通过 另 一 个 值 来 计算 ， 通 常用 于 衡量 对 象 的 长 度 
或 宽度 。 在 网 页 中 ， 使 用 百分比 的 对 象 通常 取 值 的 对 象 是 其 父 对 象 。 


4. URL 


URL (Uniform Resource Locator) 即 统一 资源 定位 符 。URL 是 用 于 完整 地 描述 Internet 
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上 网 页 和 其 他 资源 的 地 址 的 一 种 标识 方法 。 在 CSS 中 同样 可 以 使 用 绝对 地 址 或 相对 地 
址 ， 其 通常 用 于 引用 外 部 的 各 种 资源 ， 例 如 背景 图 像 等 ， 在 此 不 再 袭 述 。 


5 整数 


一 些 特殊 的 属性 允许 开发 者 以 无 单位 的 自然 数 定义 属性 的 变化 幅度 ， 例 如 font-weight 
属性 等 。 需 要 注意 的 是 ， 自 然 数 的 属性 值 不 应 包含 任何 单位 ， 绝 大 多 数 使 用 长 度 值 作为 属 
性 值 的 属性 都 允许 使 用 不 带 单位 的 数字 “0”。 


6. 英文 关键 字 


除 以 上 儿 种 属性 值 外 ，CSS 还 支持 采用 英文 单词 关键 字 作为 属性 值 ， 定 义 一 些 必须 以 
文字 描述 的 CSS 属性 ， 这 些 属 性 值 通常 与 CSS 属性 紧密 相关 。 


3.4.3 ”属性 的 优先 级 


之 前 的 章节 中 已 介绍 过 CSS 是 一 种 被 Web 浏览 器 以 行 的 方式 解析 的 语言 , 因此 ，Web 
浏览 器 在 解析 CSS 规则 的 若干 属性 和 属性 值 时 ， 同 样 存在 优先 级 的 概念 。 

在 默认 状态 下 ， 在 同一 个 CSS 样式 规则 中 ， 属 性 的 代码 越 新 ， 则 其 优先 级 越 高 ， 反 之 
则 越 低 ， 这 种 优先 级 为 默认 优先 级 。 例 如 ， 在 下 面 的 代码 中 ， 对 文本 前 景色 进行 了 多 次 
描述 。 

color : #f£00 ; 


color : #0f0 ; 
color : #00f ; 


在 上 面 的 代码 中 ，Web 浏览 器 会 依照 默认 的 优先 级 逐 行 解析 ， 并 将 最 下 方 一 行 的 同属 
性 数据 作为 应 用 到 Web 元 素 中 的 基准 样式 。 如 果 需 要 人 工 对 这 一 优先 级 进行 干预 ， 可 以 使 
用 重点 操作 符 “!important” 对 某 一 条 属性 进行 临时 提 权 ， 代 码 如 下 所 示 。 

color : #f£00 ; 


color : #0f0!important ; 
color : #00f ; 


在 上 面 的 代码 中 ， 依 次 书写 了 三 条 属性 和 属性 值 组 成 的 样式 语句 ， 按 照 默 认 的 优先 级 
规则 ,真正 应 用 到 Web 元 素 的 样式 应 为 第 三 条 语句 , 但 是 由 于 第 二 条 样式 语句 拥有 重点 操 
作 符 “limportant”， 因 此 Web 浏览 器 会 以 这 条 样式 语句 为 最 终 应 用 的 基准 。 

需要 注意 的 是 ， 重 点 操作 符 “!important” 必 须 直 接 跟随 属性 值 书写 ， 位 于 分 号 “;” 
之 前 。 一 个 语句 只 能 添加 一 个 重点 操作 符 ， 如 若干 属性 都 添加 了 重点 操作 符 ， 则 添加 重点 
操作 符 的 语句 之 间 仍 然 以 默认 优先 级 解析 。 

另外 ,重点 操作 符 “!limportant” 属 于 CSS 2.1 新 增 的 功能 , 因此 早期 的 正 浏览 器 (Intermet 
Explorer 6.0 及 之 前 版 本 的 正 浏览 器 ) 不 支持 此 功能 。 
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3.5 字体 的 样式 


文字 是 Web 页 中 最 基本 的 内 容 ， 其 通常 作为 最 基本 的 单位 以 块 的 方式 髓 入 到 XHTML 
文档 中 。CSS 允许 开发 者 定义 文本 元 素 的 字体 类 型 、 尺 寸 、 修 饰 、 粗 细 、 行 高 、 风 格 等 


3.5.1 字体 的 系列 


字体 系列 属性 的 作用 是 定义 文本 元 素 中 文字 所 采用 的 字体 系列 ， 是 对 文字 本 身 的 基础 
修饰 ， 决 定 了 字体 所 采用 的 风格 式样 和 最 终 的 显示 效果 。 


1. 衬 线 字 体系 列 和 无 衬 线 字体 系列 


计算 机 支持 的 字体 系列 多 种 多 样 ， 数 目 繁多 ， 根 据 其 书写 的 笔画 是 否 包含 修饰 特点 ， 
可 以 将 其 分 为 基本 的 两 大 类 ， 即 衬 线 字 体 和 无 衬 线 字体 。 

。 衬 线 类 字体 系列 

衬 线 类 字体 系列 是 指 字 母 或 汉字 的 笔画 开始 、 结 束 的 地 方 有 额外 的 装饰 的 字体 系列 ， 
其 特点 是 强调 横竖 笔画 的 对 比 ， 通 过 衬 线 强 制 性 地 为 字母 或 汉字 的 笔画 修饰 ， 增 强 笔画 的 
粗细 差异 ， 提 高 字体 的 阅读 性 ， 避 免 发 生 行 间 的 阅读 错误 。 

典型 的 衬 线 类 字体 系列 英文 包括 Times New Roman、Garamond 和 Georgia 等 ， 中 文 包 
括 宋 体 、 中 宋 、 明 体 等 。 衬 线 字体 系列 来 自 于 报纸 杂志 图 书 的 印刷 用 字体 ， 适 用 于 大 段 的 
正文 内 容 ， 如 图 3-1 所 示 。 

。 无 衬 线 类 字体 系列 

无 衬 线 类 字体 系列 与 衬 线 类 字体 系列 相对 应 ， 专 指 字母 或 汉字 的 笔画 没有 额外 装饰 的 
字体 。 这 类 字体 系列 通常 是 机 械 的 和 统一 线条 的 ， 往 往 拥 有 相同 的 曲率 、 笔 直 的 线条 和 锐 
利 的 转角 。 无 衬 线 类 字体 系列 相 比 衬 线 类 字体 系列 ， 显 得 规则 和 有 序 。 

典型 的 英文 无 衬 线 类 字体 系列 包括 Arial、Verdana、Trebuchet MS、Helvetica 等 ， 中 文 
无 衬 线 类 字体 系列 包括 黑体 、 雅 黑 、 幼 圆 等 。 无 衬 线 类 字体 系列 通常 适用 于 文章 的 标题 类 
文本 内 容 ， 在 以 衬 线 类 字体 系列 应 用 的 正文 段落 中 ， 也 可 以 插入 一 些 少量 的 无 衬 线 类 字体 
系列 文本 ， 以 将 这 些 少量 文本 突出 显示 ， 如 图 3-2 所 示 。 

2. 手写 字体 系列 

手写 字体 系列 是 一 大 类 字体 系列 ， 其 来 自 于 书法 艺术 ， 在 一 些 特殊 类 型 的 Web 页 中 ， 
使 用 手写 字体 系列 可 以 更 好 地 与 正文 内 容 相 结 合 ， 展 现 出 丰富 的 艺术 效果 。 

常见 的 英文 手写 字体 系列 包括 Bikham Script Pro、Viner Hand ITC、Comic Sans MS 等 ， 
常见 的 中 文 手写 字体 系列 包括 仿宋 、 楷 体 、 隶 书 、 行 楷体 等 ， 如 图 3-3 所 示 。 
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Times New Roman Arial 
Garamond Verdana 
Georgia Trebuchet MS 
宋体 Helvetica 
华文 中 宋 黑体 
Adobe 明 体 微软 雅 黑 
细 明 钵 幼 圆 
图 3-1 和 典型 衬 线 类 字体 系列 图 3-2 典型 无 衬 线 类 字体 系列 


3. 等 宽 字体 系列 


等 宽 字 体 是 另 一 类 基本 由 无 衬 线 类 字体 系列 衍生 而 出 的 特殊 字体 ， 其 特点 是 每 个 字母 
的 宽度 相等 ， 通 常用 来 模拟 命令 行 输入 和 打字 机 效果 等 。 在 Web 设计 中 ,通常 用 于 显示 各 
种 类 型 的 源 代码 数据 。 很 多 开发 者 也 会 在 开发 工具 中 使 用 等 宽 字 体 。 

由 于 中 文字 符 的 特殊 性 ， 绝 大 多 数 中 文字 体 都 属于 等 宽 字 体 ， 常 见 的 英文 等 宽 字 体 包 
括 早期 的 Courier, 微软 开发 的 Consolas、Terminal, Linux 下 的 开源 字体 DejaVu Sans Mono、 
Monospace、Nimbus Mono 工 、Luxi Mono 等 ， 如 图 3-4 所 示 。 


CH hrgptl Pio Courier 
Viner Hana ITC. Consolas 
Comic Sans MS Terminal 
仿宋 DejaVu Sans Mono 
楷体 Monospace 
隶书 Nimbus Mono L 
行 楼 体 Luxi Mono 
图 3-3 典型 手写 字体 系列 图 3-4 典型 等 宽 字体 系列 


4. Web 安全 字体 系列 


由 于 Web 设计 是 基于 计算 机 Web 浏览 器 的 设计 , 当 Web 页 被 各 种 Web 浏览 器 解析 时 ， 
仅 有 终端 用 户 计 算 机 中 已 经 安装 的 字体 系列 才能 正确 地 显示 ， 因 此 在 选取 和 使 用 字体 系列 
时 ， 要 受到 终端 用 户 计 算 机 所 安装 字体 系列 的 限制 ， 开 发 者 应 尽量 选择 绝 大 多 数 计 算 机 终 
端 用 户 都 安装 的 字体 系列 。 
这 种 为 绝 大 多 数 终端 用 户 安 装 , 可 供 开发 者 自由 选择 使 用 的 字体 系列 被 称 作 Web 安全 
字体 系列 。 依 照 操 作 系统 版 本 和 语言 的 区 别 , 常用 的 Web 安全 字体 系列 主要 包括 以 下 儿 种 ， 


96 高 效 Web 前 端 开发 之 路 一 一 YUI 3.15 


如 表 3-7 所 示 。 


表 3-7 Web 安全 字体 系列 
字体 系列 类 型 ”语言 。” 字体 系列 名 称 


衬 线 类 字体 英文 Garamond Georgia Times New Roman 
Bookman Old Style Palatino Linotype Times 
Book Antiqua Palatino 
中 文 宋体 (SimSun ) 新 宋体 (NSimSun) 
无 衬 线 类 字体 英文 Arial Helvetica Arial Black 
Gadget Tmpact Charcoal 
Lucida Sans Unicode Lucida Grande MS Sans Serif 
Geneva Symbol Tahoma 
Trebuchet MS Verdana Webdings 
Wingdings Zapf Dingbats 
中 文 黑体 (SimHei) 微软 雅 黑 (Microsoft YaHei) 
手写 类 字体 英文 Comic Sans MS 
中 文 仿宋 (FangSong) 楷体 (KaiTi) 
等 宽 类 字体 英文 Courier Courier New Lucida Console 


中 文 ” 所 有 中 文字 体 


5. 字体 系列 属性 


定义 字体 系列 需要 使 用 CSS 的 font-family 属性 , 该 属性 的 属性 值 可 以 是 三 种 格式 ， 即 
单独 的 字体 系列 名 称 ， 或 字体 系列 优先 级 列表 等 。 在 定义 了 应 用 的 字体 系列 后 ， 还 可 以 在 
字体 系列 之 后 添加 字体 系列 的 类 型 。 

。 定义 单独 字体 系列 

当 字 体系 列 为 单独 的 一 种 字体 系列 时 ， 可 以 直接 将 字体 系列 的 名 称 作为 字体 系列 属性 
的 属性 值 ， 如 下 所 示 。 


font-family : Font ; 
在 上 面 的 伪 代 码 中 ，Font 关键 字 表示 定义 的 具体 字体 系列 名 称 ， 是 font-family 属性 的 
最 基本 的 属性 值 。 例 如 ， 定 义 一 段 文本 采用 宋体 字 ， 可 以 用 以 下 两 种 方式 定义 ， 如 下 所 示 。 


font-family : 宋体 ， 


font-family : SimSun ; 


在 上 面 的 代码 中 ， 使 用 了 两 种 方式 定义 字体 系列 ， 一 种 是 以 字体 系列 的 中 文 名 称 来 实 
现 ， 另 一 种 则 采用 的 是 字体 系列 的 英文 名 称 。 

在 中 文 版 的 Web 浏览 器 中 ,这 两 种 方式 的 效果 是 完全 一 样 的 , 但 是 对 于 一 些 英文 版 本 
的 Web 浏览 器 而 言 ， 第 一 种 方式 可 能 会 造成 识别 错误 ， 因此 ， 在 此 推荐 无 论 使 用 哪 种 语言 
的 字体 ， 应 尽量 在 CSS 中 书写 字体 系列 的 英文 名 称 。 

当 定义 的 字体 系列 名 称 为 多 个 英文 单词 构成 时 ， 应 在 字体 名 称 两 侧 添加 单 引 号 “"” 或 
双 引 号 “""” 予 以 标记 ， 以 将 其 和 其 他 类 型 的 属性 值 区 分 开 来 。 例 如 ， 定 义 一 段 文本 采用 
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Arial Black 字体 系列 ， 代 码 如 下 。 
font-family : 'Arial Black'" 


。 定义 字体 系列 优先 级 列表 

当 需 要 根据 实际 客户 端 计 算 机 安装 字体 系列 ， 同 时 为 文本 内 容 匹配 多 种 字体 系列 ， 以 
防止 客户 端 计算 机 缺失 某 种 字体 系列 导致 显示 错误 时 ， 可 以 定义 一 个 具备 优先 级 的 字体 系 
列 列 表 ， 其 方法 为 以 英文 逗号 “,” 的 方式 依次 列举 多 个 字体 系列 的 名 称 ， 如 下 所 示 。 


font-family : Fontl , Font2 ; 


在 上 面 的 代码 中 ，Fontl 关键 字 和 Font2 关键 字 表示 两 种 字体 系列 的 名 称 。 在 Web 浏 
览 器 解析 这 段 代 码 时 , 会 首先 检查 客户 端 计算 机 是 否 安装 有 名 称 与 Fontl 相同 的 字体 系列 ， 
如 果 有 ， 则 将 这 段 文本 以 Fontl 字体 系列 显示 ， 和 否则 ， 再 检查 客户 端 计算 机 是 否 安装 有 名 
称 与 Font2 相同 的 字体 系列 ， 如 果 有 ， 则 将 这 段 文本 以 Font2 字体 系列 显示 。 如 果 这 两 种 
字体 系列 都 未 安装 ， 则 以 Web 浏览 器 默认 的 字体 系列 显示 。 

例如 ， 定 义 一 段 文 本 以 微软 雅 黑 字 体系 列 显 示 ， 如 未 安装 微软 雅 黑 字体 系列 (例如 
Windows XP 系统 或 更 低 版 本 的 Windows 系统 ), 则 使 用 宋体 系列 显示 。 如 为 英文 操作 系统 ， 
则 以 英文 字体 系列 Arial 显示 ， 代 码 如 下 所 示 。 


font-family : SimSun , 'Microsoft YaHei' , Arial ; 


。 定义 字体 系列 的 类 型 

在 定义 文本 的 字体 系列 时 , 除了 定义 字体 系列 的 名 称 外 , 还 可 以 定义 字体 系列 的 类 型 ， 
例如 衬 线 类 字体 系列 、 无 衬 线 类 字体 系列 、 手 写字 体系 列 和 等 宽 字 体系 列 。 此 时 ， 可 以 将 
字体 系列 的 类 型 放 在 font-family 属性 值 的 最 后 ， 与 其 他 字体 系列 的 名 称 隔 开 。 

一 个 font-family 属性 值 只 能 包含 一 个 字体 系列 。 在 下 面 的 代码 中 ， 依 次 定义 了 常用 的 
Web 安全 字体 系列 和 对 应 的 类 型 ， 如 下 所 示 。 


// 衬 线 类 字体 系列 

font-family : Garamond , serif ; 

font-family : Georgia , serif; 

font-family : 'Times New Roman' , Times , serif ; 

font-family : "Bookman Old Style' , serif ; 

font-family : "Palatino Linotype' , '‘'Book Antiqua' , Palatino , serif ; 
font-family : SimSun ， 'Times New Roman' , serif ; 

// 无 衬 线 类 字体 系列 

font-family : Arial ，Helvetica , sans-serif ; 

font-family : "Arial Black' , Gadget , sans-serif ; 

font-family : Impact , Charcoal , sans-serif ; 

font-family : "Lucida Sans Unicode' , "Lucida Grande' , sans-serif ; 
font-family : "MS Sans Serif' , Geneva , sans-serif ; 

font-family : Tahoma , Geneva , sans-serif ; 

font-family : "Trebuchet MS' , Helvetica , sans-serif ; 


font-family : Verdana , Geneva , sans-serif ; 
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font-family : "Microsoft YaHei' , 'Arial' , sans-serif ; 
// 手 写字 体系 列 

font-family : "Comic Sans MS' ，cursive ; 

font-family : "FangSong' ， "Comic Sans MS' ，cursive ; 
font-family : "KaiTi' , "Comic Sans MS' , cursive 7 

// 等 宽 字 体系 列 

font-family : "Courier New' ，Courier ，monospace ; 
font-family : "Lucida Console' , Monaco ，monospace ; 


3.5.2 ”字体 的 其 他 样式 


除了 定义 字体 的 系列 外 ，CSS 还 可 以 定义 字体 的 其 他 属性 ， 包 括 字体 的 风格 、 小 型 大 
写字 母 、 粗 细 、 尺 寸 、 行 高 等 样式 ， 为 文字 建立 丰富 的 效果 。 

1. 字体 的 风格 

在 英文 书写 习惯 中 ， 倾 斜 的 字体 表示 对 文字 内 容 本 身 的 强调 。CSS 允许 开发 者 以 
font-style 属性 定义 普通 文字 的 斜体 或 倾斜 效果 ， 其 支持 四 种 风格 属性 ， 如 表 3-8 所 示 。 


表 3-8 ”CSS 的 字体 风格 属性 值 


属性 值 ”作用 
italic 斜体 风格 
inherit 继承 父 元 素 的 风格 


属性 值 ”作用 
normal ”默认 值 ， 普 通 的 非 倾斜 字体 风格 
oblique ”倾斜 风格 


例如 ,定义 一 段 文本 以 斜体 的 方式 强调 显示 ， 可 以 使 用 font-style 属性 的 italic 属性 值 ， 
代码 如 下 所 示 。 

font-style : italic ; 

需要 注意 的 是 ， 所 有 版 本 的 正 浏览 器 都 不 支持 CSS 的 inherit 属性 值 ， 如 果 需 要 在 下 
浏览 器 下 定义 元 素 继承 父 元 素 的 某 种 效果 ， 直 接 将 其 忽略 即 可 。 另 外 ， 无 论 斜体 还 是 倾斜 
效果 ， 都 是 英文 的 特色 ， 在 实际 Web 开发 中 ， 勿 对 中 文采 用 这 种 样式 。 

2. 小 型 大 写字 母 

小 型 大 写字 母 是 英文 的 一 种 特殊 书写 方式 ， 其 效果 是 将 所 有 小 写字 母 转换 为 大 写 方 
式 ， 然 后 再 缩小 至 原 尺 寸 的 25% 左 右 。CSS 允许 开发 者 以 font-variant 属性 定义 普通 拉丁 字 
母 的 此 类 效果 ， 其 支持 以 下 几 种 属性 值 ， 如 表 3-9 所 示 。 

表 3-9 CSS 的 小 型 大 写字 母 属性 值 


属性 值 作用 属性 值 作用 
normal 默认 值 ， 普 通 的 字母 书写 风格 small-caps ”以 小 型 大 写字 母 的 方式 书写 


inherit 继承 父 元 素 的 字母 书写 风格 
例如 ， 定 义 一 段 英文 文本 的 字母 以 小 型 大 写字 母 风 格 书写 ， 代 码 如 下 所 示 。 
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font-variant : small-caps ; 


需要 注意 的 是 ， 这 种 风格 仅 对 英文 等 拉丁 字母 语言 的 文本 有 效 ， 对 中 文 文本 没有 任何 
显示 效果 的 区 别 。 


3. 字体 的 粗细 


字体 的 加 粗 是 中 文 和 英文 文本 共同 的 内 容 强调 方式 。CSS 允许 开发 者 以 font-weight 属 
性 定义 字体 的 加 粗 或 减 细 方式 ， 使 所 对 应 的 字体 与 标准 尺寸 的 字体 区 分 开 来 ， 实 现 内 容 强 
调 或 内 容 弱 化 功能 。 

font-weight 属性 的 属性 值 包括 两 种 : 一 种 是 以 整数 数值 的 方式 精确 地 定义 字体 的 加 粗 
或 减 细 模式 ， 其 值 限 定 必须 是 100 到 900 之 间 的 整 百 数字 ， 其 中 默认 粗细 程度 为 400; 另 
一 种 属性 值 定 义 方式 则 是 以 关键 字 的 方式 直接 定义 字体 的 加 粗 或 减 细 模 式 ， 其 属性 值 如 表 
3-10 所 示 。 

表 3-10 ”CSS 的 font-weight 关键 字 属 性 值 

属性 值 。 作用 
bold 加 粗 的 字体 ， 相 当 于 数字 值 700 
lighter 。”” 减 细 的 字体 ， 相 当 于 数字 值 100 


属性 值 。 作用 

normal 。 默认 值 ， 相 当 于 数字 值 400 
bolder 更 粗 的 字体 ， 相 当 于 数字 值 900 
inherit 继承 父 元 素 的 粗细 尺寸 


例如 ， 定 义 一 段 文本 加 粗 显示 ， 其 CSS 代码 写法 包含 如 下 两 种 。 


font-weight : bold :; 
font-weight : 700 ; 


所 有 的 Web 浏览 器 都 支持 font-weight 属性 , 但 是 在 实际 的 效果 中 , 使 用 数字 值 来 定义 
除了 字体 的 粗细 ， 仅 有 100、400、700 和 900 等 四 个 数字 被 认为 是 有 效 的 ， 其 他 的 数字 值 
效果 与 lighter、normal、bold 和 bolder 区 别 并 不 明显 。 


4. 字体 的 尺寸 


尺寸 也 是 字体 的 一 种 重要 属性 ， 其 决定 了 字体 在 Web 页 中 显示 的 大 小 。CSS 允许 开发 
者 以 font-size 属性 定义 字体 的 尺寸 ， 实 现 灵活 的 文本 排版 效果 。font-size 属性 的 值 可 以 是 
绝对 长 度 值 ， 也 可 以 是 相对 长 度 值 、 整 数 0 或 百分比 。 

当 font-size 属性 值 为 0 时 ， 相 当 于 相对 长 度 值 为 0px。 如 果 其 属性 值 为 百分比 ， 则 相 
对 应 的 是 其 父 元 素 的 font-size 属性 值 的 比例 。 与 font-weight 属性 类 似 ，font-size 属性 也 支 
持 以 英文 关键 字 的 方式 定义 ， 其 属性 值 如 表 3-11 所 示 。 


表 3-11 CSS 的 font-weight 关键 字 属性 值 


属性 值 作用 属性 值 作用 

xx-small 1 级 字体 ， 对 应 7pt 或 9px x-small 2 级 字体 ， 对 应 7.5pt 或 10px 
small 3 级 字体 ， 对 应 10.2pt 或 13.5px medium ”4 级 字体 ， 对 应 12pt 或 16px 
large 5 级 字体 ， 对 应 13.5pt 或 18px x-large 6 级 字体 ， 对 应 18pt 或 24px 


smaller 相对 父 元 素 尺寸 小 一 级 的 字体 
inherit 从 父 元 素 继承 字体 的 尺寸 


xx-large 7 级 字体 ， 对 应 24pt 或 32px 
larger 相对 父 元 素 尺寸 大 一 级 的 字体 
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font-size 属性 没有 统一 的 默认 值 ， 在 不 同 的 Web 浏览 器 下 ， 文 本 内 容 的 具体 尺寸 是 有 
所 区 别 的 。 例 如 ,在 正 浏览 器 中 ， 将 会 默认 定义 所 有 普通 文本 以 medium、12pt 或 16px 
的 相对 长 度 值 尺 寸 显示 。 

定义 一 段 文本 内 容 的 字体 尺寸 为 18px， 代 码 如 下 所 示 。 

font-size : 18px ; 

在 Word 等 文档 排版 工具 中 ， 往 往 以 字体 的 号 数 作为 标准 来 标记 字体 的 实际 尺寸 ， 而 
在 Web 设计 中 ， 则 往往 以 相对 长 度 值 单位 像素 (px) 作为 字体 尺寸 的 标准 。 在 实际 的 Web 
开发 中 ,经常 需要 将 这 类 字体 的 号 数 转换 为 绝对 长 度 值 或 相对 长 度 值 。 在 Windows 分 辨 率 
默认 为 96dpi 时 ， 其 对 应 的 关系 如 表 3-12 所 示 。 

表 3-12 字号 与 单位 的 换算 表 


字号 磅 (pt) 像素 (px) 字号 磅 (pt) 像素 (px) 
初 号 42pt 56px 小 初 36pt 48px 
-号 26pt 35px 小 一 24pt 32px 
二 号 22pt 29px 小 二 18pt 24px 
三 号 16pt 22px 小 三 15pt 21px 
四 号 14pt 19px 小 四 12pt 16px 
五 号 10.5pt 14px 小 五 9pt 12px 
六 号 7.5pt 10px 小 六 6.5pt 8px 
七 号 5.5pt Tpx 八 号 Spt 6pxX 


通常 情况 下 ，Web 排版 时 正文 文本 的 字体 尺寸 推荐 采用 中 文 12px、 英 文 11px 或 12px， 
可 以 尽 可 能 地 维持 文本 内 容 的 识别 性 和 效率 。 


5. 字体 的 行 高 


绝 大 多 数 语言 的 文字 都 是 横向 排版 的 ， 因 此 ， 这 些 文字 都 会 以 行 的 方式 汇集 ， 行 的 高 
度 设 置 就 是 每 一 行文 字 在 Web 页 内 占据 的 具体 高 度 尺 寸 。 一 般 情况 下 ,字体 会 在 行内 垂直 
居中 显示 ， 也 就 是 说 ， 行 越 高 ， 则 字体 所 在 行 的 文字 项 部 与 底部 的 补 白 越 大 。 

行 高 这 一 属性 本 身 不 是 字体 自身 的 属性 ， 但 是 通常 情况 下 与 字体 关系 十 分 紧密 ， 因 此 
在 此 一 并 介绍 。 

在 CSS 中 , 通过 line-height 属性 定义 字体 的 行 高 , 其 属性 值 可 以 是 数字 、 绝对 长 度 值 、 
相对 长 度 值 、 百 分 比 或 英文 关键 字 等 。 

当 line-height 属性 值 为 数字 时 ， 定 义 的 文本 行 高 将 为 该 文本 块 内 普通 字体 尺寸 与 
line-height 属性 值 的 乘积 。 例 如 ， 一 段 文本 的 字体 尺寸 为 12px，line-height 属性 值 为 2， 则 
其 实际 行 高 将 为 24px， 代 码 如 下 。 


font-size : 12px ; 

line-height : 2 ; // 实 际 段落 行 高 应 为 12pxX2， 即 24px 

当 line-height 属性 值 为 绝对 长 度 值 或 相对 长 度 值 时 ， 定 义 的 文本 行 高 将 直接 与 
line-height 属性 值 相等 。 例 如 ， 定 义 一 段 文本 的 行 高 为 10.5pt， 代 码 如 下 所 示 。 
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line-height : 10.5pt ; 


当 line-height 属性 值 为 百分比 时 , 定义 的 文本 行 高 为 该 文本 的 父 元 素 行 高 与 line-height 
属性 值 的 乘积 。 例 如 ， 当 一 个 文本 段落 的 父 元 素 行 高 为 18px， 当 此 文本 段落 的 行 高 被 设置 
为 50% 时 ， 其 实际 行 高 应 为 9px， 如 下 所 示 。 

div { 

line-height : 18px ; 
} 


divp { 
line-height : 50% ; // 实际 段落 行 高 应 为 18pxX50%， 即 9px 
} 


line-height 属性 值 除了 以 上 几 种 长 度 值 或 数字 外 ， 还 包括 两 种 英文 关键 字 ， 其 分 别 为 
normal 和 inherit。 当 line-height 属性 值 为 normal 时 ， 其 内 容 实际 行 高 将 由 Web 浏览 器 自动 
设 定 ; 而 当 line-height 属性 值 为 inherit 时 ， 其 效果 与 值 为 100% 相 同 ， 即 都 继承 父 元 素 的 


行 高 。 
3.5.3 合并 字体 样式 


CSS 支持 采用 font 属性 一 次 定义 多 种 类 型 的 字体 样式 ， 包 括 字 体 的 系列 、 风 格 、 小 型 
大 写字 母 、 粗 细 、 尺 寸 和 行 高 等 。 这 种 合并 样式 的 属性 在 CSS 中 有 许多 种 ，font 属性 只 是 
其 中 最 典型 的 一 种 。 

1. font 属性 的 基本 属性 值 

font 属性 支持 七 种 基本 属性 值 ， 分 别 用 于 从 Web 浏览 器 自身 提取 字体 系列 或 继承 父 元 
素 的 字体 系列 ， 应 用 到 对 应 的 文本 上 。 这 七 种 基本 属性 值 均 为 英文 关键 字 属 性 值 ， 其 值 和 
作用 如 表 3-13 所 示 。 

表 3-13 font 属性 的 基本 属性 值 


属性 值 作用 

caption 定义 文本 采用 浏览 器 标题 控件 〈 比 如 按钮 、 下 拉 列 表 等 ) 的 字体 系列 
icon 定义 文本 采用 浏览 器 图 标 标记 的 字体 系列 

menu 定义 文本 采用 浏览 器 下 拉 列 表 控 件 的 字体 系列 


message-box 定义 文本 采用 浏览 器 对 话 框 控 件 的 字体 系列 
small-caption ”定义 文本 采用 浏览 器 标题 控件 (比如 按钮 、 下 拉 列 表 等 的 小 型 版 本 字体 系列 


status-bar 定义 文本 采用 浏览 器 窗口 状态 栏 的 字体 系列 
inherit 定义 文本 继承 父 元 素 的 字体 系列 


在 上 表 中 ， 前 六 种 基本 属性 值 的 作用 与 font-family 属性 是 相同 的 ， 所 不 同 的 是 
font-family 属性 根据 其 属性 值 从 操作 系统 已 安装 的 字体 中 进行 名 称 匹 配 ， 而 这 6 种 基本 属 
性 值 则 是 从 Web 浏览 器 (在 Windows 操作 系统 中 ， 与 其 主题 所 定义 的 字体 相关 ) 自身 所 
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应 用 的 字体 中 调用 。 
例如 ， 定 义 一 段 文本 使 用 浏览 器 下 拉 列 表 控件 的 字体 系列 ， 代 码 如 下 所 示 。 


font : menu ; 


2. font 属性 的 复合 属性 值 序列 


font 属性 最 大 的 使 用 价值 在 于 其 可 以 包含 多 种 类 型 的 属性 值 , 定义 字体 的 系列 、 风 格 、 
小 型 大 写字 母 、 粗 细 、 尺 寸 和 行 高 等 。 在 使 用 font 属性 时 ， 开 发 者 可 以 依次 定义 六 种 类 型 
的 CSS 属性 值 ， 如 下 所 示 。 


font : Style Variant Weight Size/LineHeight Family ; 


在 上 面 的 伪 代 码 中 ,Style 关键 字 表示 字体 的 风格 属性 值 ; Variant 关键 字 表示 字体 的 小 
型 大 写字 母 属性 值 ，Weight 关键 字 表示 字体 的 粗细 属性 值 ，Size 关键 字 表示 字体 的 尺寸 属 
性 值 ，LineHeight 关键 字 表 示 字 体 的 行 高 属性 值 ，Family 关键 字 表示 字体 系列 的 属性 值 。 

例如 ， 定 义 一 段 文本 为 斜体 、 小 型 大 写字 母 、 加 粗 、16px 尺寸 ， 行 高 为 22px， 采 用 
Arial 字体 ， 代 码 如 下 所 示 。 


font : italic small-caps bold 16px/22px Arial,sans-serif ; 


在 使 用 font 属性 定义 复合 属性 值 序列 时 ,需要 注意 复合 属性 值 序列 中 除 字体 尺寸 和 行 
高 以 外 ， 属 性 之 间 都 必须 以 空格 的 方式 隔 开 。 字 体 尺 十 和 行 高 两 个 属性 之 问 需要 使 用 反 和 斜 
杠 “/” 进 行 标 记 。 

font 属性 的 复合 属性 值 序列 也 可 以 包含 caption、icon、menu、 message-box、 small-caption 
和 status-bar 等 六 种 基本 属性 值 ， 但 需要 注意 的 是 ， 字 体系 列 的 属性 值 与 caption、icon、 
menu、message-box、small-caption 和 status-bar 等 六 种 基本 属性 值 是 互 斥 的 ， 即 定义 了 字 
体系 列 属性 值 ， 就 不 能 再 定义 这 六 种 基本 属性 值 ， 反 之 亦 如 此 。 

font 属 性 的 复合 属性 值 序列 允许 开发 者 省 略 其 中 若干 项 目 , 也 就 是 说 并 非 每 次 使 用 font 
属性 的 复合 属性 值 序列 都 必须 显示 定义 所 有 的 属性 值 。 例 如 , 仅 需要 定义 字体 系列 为 Arial， 
倾斜 显示 ， 可 以 采用 如 下 的 代码 。 

font : italic Arial,sans-serif ; 

在 上 面 的 代码 中 ， 省 略 了 小 型 大 写字 母 、 粗 细 、 尺 寸 、 行 高 等 属性 ， 仅 定义 了 风格 和 
字体 系列 。 使 用 这 种 方式 定义 字体 的 样式 无 法 单独 定义 字体 的 行 高 ， 行 高 属性 仅 能 和 字体 
的 尺寸 联合 使 用 ， 如 下 所 示 。 

font : italic 12px/18px ; 

如 果 在 使 用 font 属性 的 复合 属性 值 序列 时 单独 定义 了 字体 的 行 高 , 则 Web 浏览 器 会 将 
行 高 作为 字体 的 尺寸 来 解析 。 任 何 情况 下 ， 定 义 字 体 行 高 时 都 应 和 字体 的 尺寸 一 起 显示 定 
义 才 有 效 。 
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3.6 文本 的 样式 


文本 内 容 是 若干 文字 的 集合 ， 文 本 的 样式 主要 定义 了 若干 文字 组 成 的 整体 的 排 布 方式 
和 修饰 方式 ， 为 文本 内 容 呈 现 各 种 丰富 的 视觉 效果 。 


1. 文本 的 前 景色 


前 景色 是 指 文字 本 身 的 颜色 ,其 与 文本 所 在 的 Web 元 素 的 背景 色相 对 应 。CSS 允许 开 
发 者 使 用 color 属性 定义 任意 Web 元 素 内 文本 的 前 景色 。color 属性 的 属性 值 必须 是 颜色 值 ， 
如 十 六 进 制 数字 、 颜 色 的 英文 名 称 、 百 分 比 数字 函数 、 十 进 制 数字 函数 等 ， 如 下 所 示 。 

color : #ff0000 ; 

color : #f£00 ; 

color : red; 

color 5 vob (2255 O00)5 

color.: Pqb ( 100% #0 .5 人 0) 


在 上 面 的 代码 中 ， 采 用 了 五 种 方式 定义 文本 的 前 景色 ， 将 其 设置 为 红色 。 其 中 ， 第 一 
种 方式 采用 了 完整 的 十 六 进 制 数字 表示 法 ， 第 二 种 采用 了 省 略 的 十 六 进 制 数字 ， 第 三 种 采 
用 了 颜色 的 英文 名 称 ， 第 四 种 采用 了 十 进 制 数 字 函 数 ， 第 五 种 采用 了 百分比 数字 函数 。 

2. 文本 的 首 行 缩 进 

首 行 缩 进 是 适应 中 文书 写 习 惯 的 一 种 标记 段落 文本 的 方式 。 在 中 文中 ， 通 常情 况 下 需 
要 对 段落 首 行 缩 进 两 个 字符 。CSS 支持 采用 text-indent 属性 定义 文本 内 容 的 首 行 缩 进 幅度 ， 
其 属性 值 为 绝对 长 度 值 或 相对 长 度 值 ， 默 认 值 为 0。 定 义 段 落 文本 的 首 行 缩 进 ， 代 码 如 下 
所 示 。 

text-indent : 24px ; 

在 上 面 的 代码 中 ,定义 了 段落 文本 的 默认 首 行 缩 进 值 为 24px。 实 际 开发 中 ， 推 荐 根据 
字体 本 身 的 尺寸 单位 em 作为 首 行 缩 进 的 单位 ， 以 确保 在 调节 字体 尺寸 后 ， 首 行 缩 进 的 数 
值 仍然 能 够 与 字体 尺寸 相 匹配 ， 通 常情 况 下 首 行 缩 进 的 值 会 被 定义 为 2em， 如 下 所 示 。 


text-indent : 2em; 


3. 文本 的 水 平 对 齐 方式 


文本 的 水 平 对 齐 方式 决定 了 文本 内 容 在 一 个 指定 尺寸 的 Web 元 素 中 依靠 水 平方 向 显 
示 方 位 。CSS 允许 开发 者 使 用 text-align 属性 定义 文本 的 水 平 对 齐 方式 , 其 属性 值 主要 包括 
5 种 ， 如 表 3-14 所 示 。 
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表 3-14 CSS 的 text-align 关键 字 属 性 值 

属性 值 ”作用 

right 定义 文本 内 容 居 右 对 齐 
justify ”定义 文本 内 容 两 端 对 齐 


属性 值 ”作用 

left 默认 值 ， 定 义 文本 内 容 居 左 对 齐 
center 定义 文本 内 容 居 中 对 齐 

inherit ” 继承 父 元 素 的 文本 内 容 对 齐 方 式 


例如 ， 定 义 一 段 文本 以 水 平 居 右 对 齐 的 方式 显示 ， 代 码 如 下 所 示 。 

text-align : right ; 

需要 注意 的 是 , text-align 属性 仅 当 文本 内 容 所 在 的 Web 元 素 为 块 元 素 , 或 其 被 设置 为 
以 块 元 素 的 方式 显示 请 参考 本 书 3.7 节 ) 时 才 有 作用 。 如 果 Web 元 素 本 身 没有 一 个 指定 
的 宽度 (以 内 联 的 方式 显示 )， 则 水 平 对 齐 设置 将 不 起 作用 ,文本 内 容 会 默认 以 居 左 的 方式 
显示 。 

4. 文本 的 修饰 

文本 的 修饰 是 指 对 文本 内 容 添加 一 些 辅 助 的 线条 ， 以 对 文本 的 内 容 进 行 强调 。 例 如 在 


Web 浏览 器 设置 中 ， 默 认 会 为 超 链接 标记 〈A) 添加 一 条 下 划 线 ， 这 种 下 划 线 就 是 一 种 典 
型 的 文本 修饰 。 


CSS 允许 开发 者 使 用 text-decoration 属性 定义 文本 内 容 的 修饰 方式 ， 其 支持 六 种 类 型 
的 关键 字 属 性 值 ， 如 表 3-15 所 示 。 


表 3-15 CSS 的 text-decoration 关键 字 属性 值 


属性 值 作用 属性 值 作用 

none 禁用 文本 的 修饰 效果 underline 为 文本 添加 下 划 线 效果 
overline 为 文本 添加 上 划 线 效果 line-through ”为 文本 添加 贯穿 线 效果 

blink 定义 文本 闪烁 效果 inherit 从 父 元 素 继承 文本 的 修饰 效果 


如 需要 为 一 段 文本 添加 贯穿 线 效 果 ， 以 标记 这 段 文本 被 删除 ， 代 码 如 下 所 示 。 

text-decoration : line-through ; 

不 同类 型 的 Web 元 素 , 其 CSS 样式 的 text-decoration 默认 属性 值 是 有 所 区 别 的 , 例如 ， 
超 链接 标记 〈A)、 下 划 线 标记 〈U)、 插 入 文本 标记 〈INS) 的 text-decoration 默认 属性 值 
为 underline; 删除 标记 (DEL )》、 删 除 线 标记 (CSTRIKE )、 缩 写 删 除 线 标 记 (S ) 的 text-decoration 
默认 属性 值 为 line-through 等 .其 他 绝 大 多 数 Web 元 素 的 text-decoration 默认 属性 值 为 none。 

另外 需要 注意 的 是 ,任何 一 种 Web 浏览 器 都 不 支持 text-decoration 属性 的 blink 属性 值 ， 
且 没 有 任何 可 能 要 支持 的 迹象 。 


3.7 ”容器 的 样式 


容器 是 一 种 抽象 的 概念 ， 在 Web 开发 中 ， 泛 指 可 以 内 嵌 内 容 〈 文 本 、 图 像 、 视 频 、 动 
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画 等 ) 和 子 元 素 的 Web 元 素 。 狭 义 的 容器 范畴 仅 包 含 可 以 内 嵌 内 容 的 块 元 素 ， 例 如 文档 节 
标记 (DIV)、 段 落 标 记 (P)、 表 格 标记 (TABLE) 等 。 广义 的 容器 范畴 则 不 仅 包含 块 元 素 ， 
还 包含 可 以 内 区 内 容 的 内 联 元 素 。 

容器 和 容器 之 间 可 以 相互 嵌 套 。 在 使 用 容器 时 , 可 以 通过 CSS 样式 表 定 义 容器 的 样式 ， 
形成 丰富 的 显示 效果 。 


3.7.1 容器 的 盒 模型 


盒 模型 又 被 称 作 块 模型 、 框 模型 ， 是 指 在 Web 开发 中 对 XHTML 的 容器 元 素 进行 结构 
抽象 化 ， 从 而 得 出 的 一 种 理想 化 的 矩形 结构 体系 ， 其 意义 在 于 可 以 更 直观 地 研究 容器 元 素 
之 间 的 相互 作用 关系 。 

通常 情况 下 , 盒 模型 用 于 解释 容器 在 Web 页 当中 的 各 种 具体 容器 元 素 的 显示 方式 , 一 
个 典型 的 容器 元 素 在 盒 模型 概念 下 应 包含 以 下 结构 ， 如 图 3-5 所 示 。 


图 3-5 盒 模型 结构 的 容器 元 素 


在 图 3-5 中 ， 将 一 个 典型 的 XHTML 块 状 容器 元 素 拆 分 成 了 4 个 组 成 部 分 ， 由 外 到 内 
分 别 为 补 白 、 边 框 、 填 充 和 内 容 。 

其 中 ， 补 白 又 被 称 作 外 间距 、 外 边 距 ， 即 容器 元 素 与 其 父 元 素 之 间 的 间距 ; 边框 是 容 
器 元 素 与 外 部 之 间 的 边界 线 或 分 界线 ;填充 又 被 称 作 内 间距 、 内 边 距 ， 是 容器 元 素 与 其 内 
部 内 容 、 内 部 子 元 素 之 问 的 间距 ; 内 容 则 是 包含 和 履 盖 容器 元 素 内 部 内 容 〈 例 如 文本 、 图 
像 、 视 频 或 动画 等 )、 内 部 子 元 素 的 区 域 。 

在 CSS 中 ,使 用 抽象 化 的 盒 模型 概念 ， 可 以 清晰 地 由 外 到 内 对 容器 元 素 进行 详细 的 描 
述 ， 阐 述 容器 元 素 与 其 父 元 素 、 子 元 素 之 间 的 位 置 布局 关系 。 


3.7.2 ”容器 的 显示 效果 


在 Web 页 中 , 所 有 的 显示 内 容 都 是 被 包 训 在 大 大 小 小 的 各 类 容器 元 素 中 ,因此 容器 元 
素 的 显示 样式 决定 了 这 些 被 包 庄 内 容 的 具体 显示 形式 。 使 用 CSS 样式 表 ， 可 以 方便 地 定义 
各 种 容器 的 显示 样式 。 


1. 容器 的 显示 方式 
CSS 提供 了 display 属性 ， 用 于 定义 容器 的 显示 方式 。display 属性 最 重要 的 意义 在 于 
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定义 容器 在 Web 页 中 显示 的 块 的 类 型 ， 其 支持 多 种 属性 ， 如 表 3-16 所 示 。 


表 3-16 CSS 的 display 属性 值 


属性 值 作用 

none 定义 容器 处 于 隐藏 状态 

block 定义 容器 以 块 的 方式 显示 ， 且 独占 一 行 。 对 块 元 素 而 言 ， 此 属性 为 默认 值 

inline 定义 容器 以 内 联 的 方式 显示 ， 对 内 联 元 素 而 言 ， 此 属性 为 默认 值 

inline-block 定义 容器 以 块 的 方式 显示 ， 但 不 独占 

list-item 定义 容器 以 列表 项 目的 方式 显示 , 对 于 列表 项 目标 记 (LI) 、 定 义 词 条 标记 (DT) 、 
定义 解释 标记 DD) 等 列表 项 目标 记 而 言 ， 此 属性 为 默认 值 

run-in 定义 容器 根据 上 下 文 决定 以 块 元 素 或 内 联 元 素 的 方式 显示 

table 定义 容器 以 表格 的 方式 显示 ， 对 于 表格 标记 (TABLE) 而 言 ， 此 属性 为 默认 值 

inline-table 定义 容器 以 内 联 表 格 的 方式 显示 

table-row-group 定义 容器 以 表格 行 的 分 组 方式 显示 ， 对 于 表格 主体 标记 TBODY) 而 言 ， 此 属性 
为 默认 值 

table-header-group ”定义 容器 以 表 头 行 的 分 组 方式 显示 ， 对 于 表 头 标记 (THEAD) 而 言 ， 此 属性 为 默 
认 值 

table-footer-group 定义 容器 以 脚注 行 的 分 组 方式 显示 ， 对 于 脚注 标记 〈TFOOT) 而 言 ， 此 属性 为 默 
认 值 

table-row 定义 容器 以 表格 行 的 方式 显示 ， 对 于 表格 行 标记 (TR) 而 言 ， 此 属性 为 默认 值 

table-column-group ”定义 容器 以 表格 列 组 的 方式 显示 ， 对 于 表格 列 组 标记 (COLGROUP) 而 言 ， 此 属 
性 为 默认 值 

table-column 定义 容器 以 表格 列 的 方式 显示 

table-cell 定义 容器 以 表格 单元 格 的 方式 显示 ， 对 于 表格 单元 格 标记 TD) 和 表 头 单元 格 标 
记 (TH) 而 言 ， 此 属性 为 默认 值 

table-caption 定义 容器 以 表 头 的 方式 显示 ， 对 于 表 头 标记 (CAPTION) 而 言 ， 此 属性 为 默认 值 

inherit 定义 容器 从 父 元 素 继承 显示 方式 


绝 大 多 数 主流 Web 浏 览 器 ( 除 正 7.0 及 以 下 版 本 的 正 浏 览 器 ) 都 支持 以 上 所 有 的 display 
属性 值 .在 下 7.0 及 其 以 下 版 本 的 正 浏览 器 不 支持 inline-table、 run-in、 table、 table-caption、 
table-cell 、table-column 、table-column-group 、table-row 和 table-row-group 等 属性 值 。 另 外 ， 
在 下 6.0 及 以 下 版 本 的 正 浏览 器 中 ， 不 支持 inline-block 属性 值 。 


2. 容器 的 尺寸 

尺寸 是 容器 的 一 种 基本 属性 ， 所 有 块 元 素 容器 都 必须 有 一 个 固定 的 尺寸 ， 否 则 很 可 能 
无 法 在 Web 页 中 正常 显示 。CSS 支持 使 用 width 属性 和 height 属性 分 别 定义 容器 的 宽度 和 
高 度 ， 其 属性 值 可 以 是 绝对 长 度 值 或 相对 长 度 值 。 例 如 ， 定 义 一 个 容器 元 素 为 宽 200px、 
高 10pt 的 矩形 ， 代 码 如 下 所 示 。 

width : 200px ; 

height : 10pt ; 

width 属性 和 height 属性 的 默认 属性 值 为 英文 关键 字 auto， 其 表示 由 Web 浏览 器 自动 
计算 容器 的 宽度 或 高 度 。 在 非 正 系列 Web 浏览 器 中 ， 还 支持 采用 英文 关键 字 inherit 定义 
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width 属性 和 height 属性 ， 表 示 继 承 父 元 素 的 尺寸 。 

width 属性 和 height 属性 可 应 用 于 所 有 的 块 状 显示 元 素 标记 ， 不 仅 包 含 容器 标记 ， 还 
支持 一 些 非 容器 类 的 显示 元 素 标记 ， 例 如 图 像 标记 (IMG)、 对 象 标记 (OBJECT) 和 里 册 
区 域 标记 (AREA) 等 。 

在 一 些 特殊 的 场合 ,可 能 会 无 法 直接 定义 某 个 Web 元 素 的 固定 尺寸 , 而 是 需要 为 其 定 
义 尺寸 的 变化 范围 ， 以 便 根据 内 容 的 增 减 ， 限 定 容器 自身 的 尺寸 变化 幅度 ， 此 时 就 需要 使 
用 CSS 的 四 种 尺寸 范围 属性 ， 即 min-width 属性 、max-width 属性 、min-height 属性 和 
max-height 属性 。 

其 中 ，min-width 属性 用 于 定义 容器 的 最 小 宽度 ; max-width 属性 用 于 定义 容器 的 最 大 
宽度 ; min-height 属性 用 于 定义 容器 的 最 小 高 度 ; max-height 属性 用 于 定义 容器 的 最 大 高 度 。 
这 四 种 属性 的 属性 值 与 width 属性 、height 属性 使 用 方式 一 致 。 例 如 ， 限 定 一 个 Web 元 素 
最 小 高 度 120px， 最 大 高 度 300px， 代 码 如 下 。 


min-height : 120px ; 
max-height : 300px ; 


绝 大 多 数 主流 Web 浏览 器 ( 除 正 6.0 及 之 前 版 本 的 正 浏览 器 ) 都 支持 min-width 属性 、 
max-width 属性 、min-height 属性 和 max-height 属性 。IE 6.0 及 之 前 版 本 的 正 浏览 器 不 识别 
max-width 属性 和 max-height 属性 ， 也 不 支持 尺寸 的 范围 设置 ， 其 往往 会 将 min-width 属性 
识别 为 width 属性 ， 将 min-height 属性 识别 为 height 属性 。 


3. 容器 的 浮动 


在 各 种 富 文 本 编辑 器 中 ， 往 往 会 提供 图 文 混 排 的 功能 ， 为 包含 文本 和 图 像 的 文档 实现 
图 像 浮动 处 理 ， 从 而 使 文本 内 容 围 绕 在 图 像 周 围 ， 呈 现 出 美观 的 效果 。 

CSS 允许 开发 者 通过 float 属性 定义 任意 的 容器 浮动 显示 模式 , 自动 将 容器 以 块 的 方式 
显示 并 向 指定 的 方向 浮动 ， 以 实现 类 似 的 图 文 混 排 环绕 效果 。float 属性 支持 四 种 关键 字 属 
性 值 ， 如 表 3-17 所 示 。 

表 3-17 float 属性 的 关键 字 属 性 值 
属性 值 作用 
right 定义 容器 向 右 浮动 
inherit 由 容器 的 父 元素 处 继承 其 浮动 方式 


属性 值 ”作用 
left 定义 容器 向 左 浮动 
none 默认 值 ， 容 器 不 浮动 


例如 ， 定 义 一 个 Web 元 素 向 左 浮动 ， 代 码 如 下 。 
float 3 left 3 


在 此 需要 注意 的 是 ， 任 何 容器 在 浮动 时 都 必然 会 呈现 为 块 状 ， 或 以 块 的 方式 显示 ， 
便 该 容器 并 没有 定义 过 宽度 和 高 度 。 如 果 容 器 本 身 没 有 定义 宽度 和 高 度 ， 那 么 其 ee 
度 将 由 浏览 器 根据 其 内 容 和 子 元 素 的 尺寸 自动 计算 。 

在 Web 页 的 布局 中 ， 容 器 的 浮动 显示 意义 十 分 重要 ， 其 可 以 将 若干 Web 元 素 以 块 的 
方式 显示 ， 且 在 一 行 排列 〈 相 当 于 display 属性 的 inline-block 属性 值 效果 )。 
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4. 容器 的 定位 方式 


在 Web 开发 中 ， 所 有 的 容器 以 默认 的 方式 在 Web 页 中 依次 排列 显示 ， 其 位 置 由 排列 
顺序 决定 ， 这 种 默认 的 定位 方式 即 流动 定位 方式 。 除 了 流动 定位 方式 外 ，CSS 还 提供 了 多 
种 类 型 的 显示 定位 方式 ， 这 些 定位 方式 可 以 通过 CSS 的 position 属性 实现 修改 ， 其 包含 以 
下 几 种 属性 值 ， 如 表 3-18 所 示 。 


表 3-18 position 属性 的 属性 值 
属性 值 。 作用 
static 默认 值 ， 定 义 容 器 以 流动 定位 的 方式 显示 ， 出 现在 正常 的 页 面 内 容 中 
absolute ”定义 容器 以 局 部 绝对 定位 的 方式 显示 ， 定 位 参照 物 为 其 上 一 级 流动 定位 的 父 元 素 
fixed 定义 容器 以 整体 绝对 定位 的 方式 显示 ， 定 位 参照 物 为 浏览 器 窗口 
relative 定义 容器 以 相对 定位 的 方式 显示 ， 定 位 参照 物 为 其 自身 流动 定位 时 的 位 置 
inherit 由 容器 的 父 元 素 继承 其 定位 方式 


在 上 面 的 四 种 主要 关键 字 属 性 中 ，static 属性 值 定义 的 是 默认 的 流动 定位 方式 ， 
absolute、fixed 和 relative 三 种 属性 值 均 为 绝对 定位 方式 ， 唯 一 区 别 在 于 这 三 种 属性 值 定位 


使 用 的 参照 物 。 由 于 其 参照 物 有 所 区 别 ， 因 此 在 为 容器 定位 时 ， 需 要 实际 根据 需求 来 选择 
绝对 定位 属性 。 


。 针对 窗口 定位 

例如 , 需要 定位 的 容器 是 页 面 中 的 漂浮 广告 , 其 自身 需要 与 页 内 的 其 他 元 素 完 全 隔绝 ， 
则 可 以 采用 浏览 器 窗口 为 参照 物 ， 使 用 fixed 属性 值 ， 当 浏览 器 窗口 滚动 时 ， 该 容器 将 被 
钉 死 在 窗口 的 指定 位 置 。 

。 针对 元 素 流 定位 

如 果 需 要 定位 的 容器 是 页 内 的 一 些 独 立 元 素 ， 但 是 又 不 需要 其 钉 死 在 窗口 指定 的 位 
置 ， 则 可 以 使 用 absolute 属性 值 ， 针 对 其 上 一 级 流动 定位 的 父 元 素 进行 绝对 定位 。 

。 针对 自身 位 置 定位 

如 果 仅 仅 需要 在 不 影响 父 元 素 位 置 的 情况 下 对 某 个 容器 进行 位 置 的 微调 ， 则 可 以 使 用 
relative 属性 值 ， 针 对 容器 自身 的 位 置 进 行 简单 的 偏 移 设置 。 


5. 容器 的 绝对 位 置 


在 使 用 绝对 定位 后 ， 即 可 通过 CSS 的 属性 定义 容器 的 绝对 位 置 ， 完 成 整个 绝对 定位 设 
置 流 程 。 

。 平面 绝对 位 置 

CSS 提供 了 四 种 属性 分 别 用 于 定义 容器 的 平面 坐标 ， 如 表 3-19 所 示 。 


表 3-19 CSS 的 平面 坐标 属性 

属性 作用 

right 定义 容器 在 绝对 定位 下 的 右 侧 偏 移 距离 
bottom ”定义 容器 在 绝对 定位 下 的 底部 偏 移 距离 


属性 ”作用 
left 定义 容器 在 绝对 定位 下 的 左 侧 偏 移 距离 
top 定义 容器 在 绝对 定位 下 的 顶部 偏 移 距离 


表 3-19 中 的 四 种 属性 都 是 基于 长 度 距 离 的 , 因此 其 属性 值 可 以 是 相对 长 度 值 、 绝对 长 
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度 值 、 与 自身 对 应 尺寸 的 百分比 ， 也 可 以 是 关键 字 auto 或 inherit。 当 其 属性 值 为 auto 时 ， 
默认 以 Web 浏览 器 计算 对 应 方向 的 偏 移 距离 ,而 当 其 属性 值 为 mherit 时 , 默认 由 其 父 元 素 
继承 对 应 方向 的 偏 移 距 离 。 

例如 ， 定 义 一 个 绝对 定位 的 Web 元 素 相 对 其 参照 物 左 侧 偏 移 10px， 顶 部 偏 移 22px， 
代码 如 下 。 


left * 10px 3 
top ;: 22p¥ 3? 


在 此 需要 注意 的 是 ， 由 于 容器 自身 往往 具有 一 定 的 尺寸 ， 因 此 在 定义 了 容器 的 左 侧 偏 
移 为 一 个 精确 的 长 度 值 后 ， 请 勿 再 为 其 定义 右 侧 的 偏 稀 ， 同 理 ， 在 定义 了 容器 的 顶部 偏 移 
为 一 个 精确 的 长 度 值 后 ， 也 请 勿 再 为 其 定义 底部 的 偏 移 。 偏 移 的 参照 物 由 之 前 介绍 的 
position 属性 决定 ， 参 照 物 决定 了 偏 移 值 生效 的 范围 。 

。 层 合 顺序 

层 倒 顺序 也 是 反映 容器 位 置 的 一 种 参数 。 当 容器 被 设 定 为 绝对 定位 后 ， 如 果 多 个 容器 
之 间 产 生 了 重合 ， 则 可 以 使 用 CSS 提供 的 z-index 属性 对 这 些 重 炙 的 容器 进行 排序 ， 决 定 
哪个 容器 显示 ， 哪 个 容器 被 合 压 。 

z-index 属性 的 属性 值 可 以 是 整数 或 auto、inherit 等 英文 关键 字 。 当 其 属性 值 为 整数 时 ， 
数值 越 大 , 则 显示 的 优先 级 越 高 ,反之 则 越 低 。 如果 其 属性 值 为 auto， 则 由 容器 在 XHTML 
代码 中 的 位 置 来 决定 是 否 显示 。 在 代码 中 出 现 得 越 晚 ， 则 显示 优先 级 越 高 。 如 果 其 属性 值 
为 inherit， 则 由 容器 的 父 元 素 继承 层 人 顺序 属性 。 

在 使 用 z-index 属性 时 需要 注意 ， 被 应 用 该 属性 的 容器 必须 被 定义 为 绝对 定位 ， 即 其 
position 属性 的 值 必须 是 absolute、relative 或 fixed， 和 否则 z-index 属性 将 不 起 作用 。 

例如 ， 定 义 一 个 容器 始终 在 浏览 器 窗口 的 左上 角 浮 动 ， 且 显示 于 所 有 内 容 之 上 ， 代 码 
如 下 。 

position : fixed ; 

left : Opx 3 

top : Opx ; 

z-index : 999 3» 


3.7.3 ”容器 的 补 白 和 填充 


容器 的 补 白 和 填充 是 对 其 外 部 和 内 部 的 尺寸 进行 拓展 或 收缩 的 一 种 描述 方式 ， 其 可 以 
改变 容器 与 其 父 元 素 、 同 级 元 素 或 子 元 素 之 间 的 间距 ， 更 加 灵活 地 定义 容器 和 容器 之 间 的 
1. 容器 的 补 白 


补 白 是 容器 与 外 部 元 素 的 边 距 ,CSS 提供 了 margin 系列 属性 用 于 定义 容器 的 补 白 , 其 
包含 五 种 属性 ， 即 margin-top、margin-right、margin-bottom、margin-left 以 及 margin 自身 。 
其 中 ，margin-top、margin-right、margin-bottom 和 margin-left 等 四 种 属性 是 单独 属性 
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值 的 属性 ， 支 持 采 用 百分比 、 绝 对 长 度 值 、 相 对 长 度 值 定义 容器 在 顶部 、 右 侧 、 底 部 和 左 
侧 四 个 方向 的 补 白 。 另 外 ， 这 四 个 属性 还 支持 使 用 英文 关键 字 auto( 默 认 值 》 和 inherit 定 
义 由 Web 浏览 器 自行 计算 容器 补 白 的 长 度 值 ， 或 从 容器 的 父 元 素 继承 容器 补 白 的 长 度 值 。 
例如 ， 定 义 一 个 容器 左 侧 补 白 40px， 代 码 如 下 所 示 。 


margin-left : 40px ; 


定义 其 他 方向 的 补 白 距离 与 定义 左 侧 的 补 白 距 离 类 似 ， 在 下 面 的 代码 中 ， 就 定义 了 容 
器 四 个 方向 的 不 同 补 白 距离 ， 如 下 所 示 。 


margin-left : 35px ; 

margin-right : 2em; 

margin-top : 0; 

margin-bottom : Spt ; 

margin 属性 与 以 上 四 种 margin 系列 属性 不 同 , 其 属于 复合 属性 ， 即 允许 定义 多 个 属性 
值 的 属性 。margin 属性 同时 允许 开发 者 为 其 定义 不 超过 四 个 属性 值 ， 其 每 种 属性 值 定义 方 
式 都 有 所 区 别 。 

当 margin 属性 同时 包含 四 个 属性 值 时 ， 其 各 属性 值 分 别 用 于 定义 容器 顶部 、 右 侧 、 底 
部 和 左 侧 等 四 个 方向 的 补 白 。 例 如 ， 定 义 一 个 容器 顶部 补 白 S0px， 右 侧 补 白 40px， 底 部 补 
白 30px， 左 侧 补 白 20px， 代 码 如 下 。 


margin : 50px 40px 30px 20px; 

当 margin 属性 同时 包含 三 个 属性 值 时 ,其 各 属性 值 分 别 用 于 定义 容器 项 部、 水 平 左 右 
侧 和 容器 底部 等 方向 的 补 白 。 例 如 ， 定 义 一 个 容器 顶部 补 白 为 20px， 左 侧 和 右 侧 补 白 均 为 
30px， 底 部 补 白 10px， 代 码 如 下 。 


margin : 20px 30px 10px ; 

当 margin 属性 同时 包含 两 个 属性 值 时 , 其 各 属性 值 分 别 用 于 定义 容器 垂直 方向 和 水 平 
方向 的 补 白 。 例 如 ， 定 义 一 个 容器 顶部 与 底部 的 补 白 为 10pt， 左 侧 与 右 侧 的 补 白 为 Spt， 
代码 如 下 。 


margin : 10pt 5pt ; 


当 margin 属性 仅 包含 一 个 属性 值 时 , 其 表示 定义 容器 四 周 所 有 方向 的 补 白 均 为 相等 的 
指定 距离 ， 例 如 ， 定 义 一 个 容器 四 周 的 补 白 均 为 浏览 器 自动 计算 ， 代 码 如 下 所 示 。 


margin : auto ; 


在 使 用 margin 系列 属性 定义 容器 的 补 白 时 需要 额外 注意 ,IE 6.0 及 之 前 版 本 的 正 浏览 
器 具有 一 个 兼容 性 bug， 即 当 定 义 了 容器 的 浮动 方向 为 左 侧 或 右 侧 后 ， 对 应 方向 显示 的 补 
白 距 离 为 定义 数值 距离 的 两 倍 。 

例如 ， 当 定义 某 个 容器 向 左 浮动 ， 且 左 侧 补 白 10px， 在 正 6.0 及 之 前 版 本 的 正 浏览 
中 ， 此 补 白 距 离 将 被 显示 为 20px。 因 此 ， 需 要 使 用 CSS hack 的 方式 进行 修补 ， 典 型 的 修 
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补 方式 如 下 所 示 。 


float : left ; 
margin : 10px 20px 10px 20px!important ; 
margin : 10px 20px 10px 10px ; 


在 上 面 的 代码 中 ,连续 使 用 了 两 个 margin 属性 值 定义 容器 的 补 白 。 其 中 ， 第 一 条 是 针 
对 正 7.0 及 之 后 版 本 的 正 浏 览 器 的 代码 ， 第 二 条 则 是 针对 下 6.0 及 之 前 版 本 的 正 浏览 器 
(这 些 浏览 器 不 识别 “limportant” 提 权 )。 

容器 的 补 白 与 绝对 定位 的 位 置 在 不 同类 型 的 容器 上 具有 各 自 的 实用 意义 。 如 果 容器 因 
绝对 定位 设置 而 被 从 整个 文档 流 中 剥离 出 来 ， 则 需要 用 绝对 定位 来 定义 其 位 置 ， 而 如 果 容 
器 并 未 从 文档 流 中 剥离 出 来 ， 仍 然 属于 文档 流 的 一 部 分 ， 则 可 以 使 用 补 白 的 方式 对 其 进行 

2. 容器 的 填充 


填充 是 容器 与 其 内 部 内 容 和 子 元 素 的 边 距 。 与 补 白 类 似 ，CSS 也 提供 了 五 种 属性 用 于 
定义 容器 的 填充 ， 即 padding 系列 属性 的 padding-top、padding-right、padding-bottom、 
padding-left 以 及 padding 自身 。 

与 margin 系列 属性 类 似 ，padding-top、padding-right、padding-bottom 和 padding-left 
等 四 种 属性 都 是 单独 属性 值 的 属性 ， 其 属性 值 可 以 是 百分比 、 绝 对 长 度 值 、 相 对 长 度 值 、 
英文 关键 字 auto 和 inherit， 分 别 用 于 定义 容器 顶部 、 右 侧 、 底 部 和 左 侧 四 个 方向 的 填充 
距离 。 

当 其 属性 为 百分比 、 绝 对 长 度 值 或 相对 长 度 值 时 ， 将 直接 决定 容器 的 填充 距离 ， 当 其 
属性 为 auto 时 ， 将 由 Web 浏览 器 自行 计算 容器 填充 的 距离 ， 而 当 其 属性 值 为 inherit 时 ， 
定义 从 容器 的 父 元 素 继承 容器 补 白 的 长 度 值 。 

在 下 面 的 代码 中 ， 将 直接 通过 以 上 四 种 属性 定义 一 个 容器 四 个 方向 的 填充 距离 ， 如 下 
所 示 。 


padding-left : 15px ; 


padding-right : 0 : 
padding-top : auto ; 
padding-bottom : 22pt ; 


padding 属性 与 之 前 介绍 的 margin 属性 十 分 类 似 ， 其 也 属于 复合 属性 ， 即 允许 定义 多 
个 属性 值 的 属性 ， 但 至 多 不 超过 四 个 属性 。 

当 padding 属性 同时 包含 四 个 属性 值 时 ， 其 四 个 属性 值 依次 用 于 定义 容器 项 部 、 右 侧 、 
底部 和 左 侧 等 四 个 方向 的 填充 ， 例 如 定义 一 个 容器 顶部 填充 22pt， 右 侧 填充 10px， 底 部 填 
充 0px， 左 侧 填充 lem， 代 码 如 下 。 


padding : 22pt 10px 0 lem ; 


当 padding 属性 同时 包含 三 个 属性 值 时 ， 其 三 个 属性 值 依次 用 于 定义 容器 项 部、 水 平 
左右 两 侧 以 及 容器 底部 等 三 个 方向 的 填充 。 例 如 ， 定 义 一 个 容器 项 部 填充 为 10px， 左 侧 和 
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右 侧 填充 为 2em， 底 部 填充 为 anato， 代 码 如 下 。 
padding : 10px 2em auto ; 


当 padding 属性 同时 包含 两 个 属性 值 时 ， 其 两 个 属性 值 依次 用 于 定义 容器 垂直 方向 和 
水 平方 向 的 填充 。 例 如 ， 定 义 一 个 容器 垂直 方向 填充 为 Spx， 水 平方 向 填充 为 lem， 代 码 
如 下 。 


padding : 5px lem ; 


当 padding 属性 仅 包含 一 个 属性 值 时 ， 其 表示 定义 容器 四 周 所 有 方向 的 填充 均 为 指定 
的 相等 距离 。 例 如 ， 定 义 一 个 容器 四 周 的 填充 均 为 5px， 代 码 如 下 所 示 。 


padding : Spx ; 


3.7.4 ”容器 的 边框 


边框 是 容器 内 外 的 分 界线 ， 在 默认 情况 下 ， 除 了 表格 和 被 赋予 超 链接 的 图 像 ， 儿 乎 所 
有 的 Web 元 素 都 没有 显 式 的 边框 。 在 设计 Web 元 素 时 ， 可 以 通过 CSS 赋予 Web 元 素 多 种 
类 型 和 颜色 的 边框。 


1. 容器 边框 的 宽度 


宽度 是 容器 边框 最 基本 的 属性 。 在 CSS 中 ， 提 供 了 五 种 属性 用 于 定义 边框 的 宽度 。 如 
果 需 要 为 整个 容器 赋予 统一 的 边框 宽度 ， 可 以 使 用 CSS 的 border-width 属性 ， 其 属性 值 可 
以 是 相对 长 度 值 、 绝 对 长 度 值 ， 或 指定 的 英文 关键 字 ， 默 认 值 为 0。 

当 border-width 属性 的 属性 值 为 相对 长 度 值 或 绝对 长 度 值 时 ， 将 直接 决定 容器 四 周 的 
边框 为 精确 的 设 定 宽度 ， 例 如 ， 定 义 一 个 容器 四 周 的 边框 宽度 为 2px， 代 码 如 下 。 


border-width : 2px ; 
border-width 属性 支持 四 种 类 型 的 英文 关键 字 属 性 值 ， 如 表 3-20 所 示 。 


表 3-20 border-width 属性 的 关键 字 属 性 值 

属性 值 ”作用 

medium ”为 容器 定义 中 等 宽度 的 边框 ， 相 当 于 3px 
inherit 。” 由 容器 的 父 元 素 继承 边框 宽度 设置 


属性 值 ”作用 
thin 为 容器 定义 细 边 框 ， 相 当 于 lpx 
thick 为 容器 定义 粗 边框 ， 相 当 于 5px 


border-width 属性 也 支持 不 超过 四 个 复合 属性 值 , 这些 复合 属性 值 的 使 用 方法 与 之 前 介 


绍 的 margin 属性 和 padding 属性 类 似 。 例 如 ， 分 别 定义 容器 项 部 边框 宽度 为 2px， 右 侧 边 
框 宽度 为 Spx， 底 部 边框 宽度 为 3px， 左 侧 边框 宽度 为 ]px， 代 码 如 下 。 


border-width : 2px 5px 3px lpx ; 


在 需要 分 别 为 容器 四 周 的 边框 定义 不 同 的 宽度 时 ， 还 可 以 使 用 由 border-width 衍生 而 
来 的 四 种 系列 属性 ， 包 括 border-top-width、border-right-width、border-bottom-width 和 
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borderleft-width， 其 分 别 可 定义 容器 顶部 、 右 侧 、 底 部 和 左 侧 四 个 方向 的 边框 宽度 。 
这 四 种 属性 都 支持 采用 单一 属性 值 进行 定义 。 例如， 分别 定 义 一 个 容器 顶部 边框 5px， 
右 侧 边框 2px， 底 部 边框 3px， 左 侧 边框 为 0， 代 码 如 下 。 


border-top-width : 5px ; 
border-right-width : 2px ; 
border-bottom-width : 3px ; 
border-left-width : 0; 


2. 容器 边框 的 类 型 


CSS 支持 开发 者 为 容器 定义 多 种 类 型 的 边框 ， 例 如 常见 的 包括 实 线 、 点 划 线 、 虚 线 、 
双 线 和 一 些 特殊 的 3D 特效 线 等 。 在 定义 容器 四 周 的 边框 类 型 时 ， 需 要 使 用 border-style 属 
性 ， 其 属性 值 包括 11 种 英文 关键 字 ， 如 表 3-21 所 示 。 


表 3-21 border-style 属性 的 关键 字 属 性 值 

属性 值 ”作用 

hidden ”定义 存在 边框 但 处 于 隐藏 状态 , 仅 对 表格 
类 元 素 有 效 ， 用 于 合并 表格 边框 

dashed ”虚线 边框 ， 由 若干 短 直 线 构成 的 边框 线 

double ” 双 实 线 边框 

ridge 3D 凸 起 边 杠 

outset ”3D 弹 起 边框 


属性 值 ”作用 
Done 默认 值 ， 定 义 无 边 杠 


dotted 。 ”点 划 线 边框 ， 由 若干 点 构成 的 边框 线 
solid 实 线 边 框 

groove ”3D 冲模 边框 

inset 3D 嵌入 边框 

inherit 。” ”由 父 元 素 继承 边框 的 类 型 


例如 ， 定 义 一 个 容器 边框 均 为 虚线 ， 代 码 如 下 。 
border-style : dashed ; 


border-style 支持 同时 定义 不 超过 四 个 属性 值 ， 为 容器 四 周 建 立 不 同类 型 的 边框 ， 其 使 
用 方法 与 之 前 介绍 的 margin 属性 和 padding 属性 类 似 。 例 如 ， 定 义 一 个 容器 顶部 边框 为 实 
线 ， 左 侧 和 右 侧 水 平方 向 边框 为 点 划 线 ， 底 部 边框 为 虚线 ， 代 码 如 下 。 


border-style : solid dotted dashed ; 


在 需要 分 别 为 容器 四 周 的 边框 定义 不 同 的 边框 类 型 时 , 还 可 以 使 用 由 border-style 衍生 
而 来 的 四 种 系列 属性 ， 包 括 border-top-style 、border-right-style 、border-bottom-style 和 
border-left-style 等 ， 其 分 别 可 定义 容器 顶部 、 右 侧 、 底 部 和 左 侧 四 个 方向 的 边框 类 型 。 
这 四 种 属性 都 支持 采用 单一 属性 值 进行 定义 。 例 如 ， 分 别 定义 一 个 容器 顶部 边框 为 实 
右 侧 边框 为 点 划 线 ， 底 部 边框 为 虚线 ， 左 侧 边框 为 双 实 线 ， 代 码 如 下 。 
border-top-style : solid ; 
border-right-style : dotted ; 


border-bottom-style : dashed ; 
border-left-style : double ; 


线 
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需要 注意 的 是 在 Web 浏览 器 中 ， 边 框 线 的 显示 类 型 与 边框 线 的 宽度 也 有 着 直接 的 关 
系 。 当 边框 线 的 宽度 小 于 3px 时 ， 双 实 线 边框 、3D 凹 槽 边框 、3D 凸 起 边框 、3D 嵌入 边框 
和 3D 弹 起 边框 等 类 型 的 边框 显示 效果 和 实 线 边框 没有 区 别 。 


3. 容器 边框 的 颜色 


CSS 提供 了 border-color 属性 用 于 定义 容器 四 周边 框 的 颜色 ， 其 属性 值 可 以 是 十 六 进 
制 数字 、 颜 色 的 英文 名 称 、 百 分 比 数字 函数 、 十 进 制 数字 函数 或 inherit 英文 关键 字 。 
border-color 属性 可 以 包含 四 个 复合 属性 值 ， 其 使 用 方法 与 之 前 介绍 的 margin 属性 和 
padding 属性 类 似 。 例 如 ， 定 义 一 个 容器 的 四 周边 框 中 ， 垂 直方 向 为 红色 ,水 平方 向 为 绿色 ， 
代码 如 下 。 


border-color : red green; 

如 果 需 要 定义 容器 四 周 都 采用 统一 的 蓝 色 作为 边框 色 ， 则 代码 如 下 所 示 。 

border-color : rgb ( 0% , 0% , 100% ) ; 

border-color 属性 是 具有 默认 值 的 ， 在 默认 的 状况 下 ，bordercolor 属性 的 属性 值 为 
transparent。 

在 需要 分 别 为 容器 定义 四 周 不 同 颜色 的 边框 时 , 也 可 以 使 用 由 bordercolor 属性 衍生 而 
来 的 四 种 属性 ， 其 分 别 为 bordertop-color 、border-right-color 、border-bottom-color 和 
borderleft-color， 这 四 种 属性 都 支持 单一 的 颜色 属性 值 。 例 如 ， 定 义 一 个 容器 顶部 边框 颜 
色 为 红色 ， 右 侧 边框 颜色 为 绿色 ， 底 部 边框 颜色 为 黑色 ， 左 侧 边框 颜色 为 蓝 色 ， 代 码 如 下 
所 示 。 

border-top-color : red ; 

border-right-color : #00ff00 ; 


border-bottom-color : rgb (0，0，0) : 
border-left-color : rgb ( 0% , 0% , 100% ) ; 


4. 合并 容器 边框 设置 


如 果 需 要 为 容器 定义 四 周 统一 的 整体 边框 ， 包 括 相 同 的 宽度 、 颜 色 和 类 型 ， 则 可 以 使 
用 CSS 提供 的 border 属性 。border 属性 支持 四 种 类 型 的 属性 值 ， 如 表 3-22 所 示 。 


表 3-22 ”border 属性 的 四 种 属性 值 


属性 值 作用 
边框 宽度 值 ”定义 容器 四 周边 框 的 宽度 , 支持 绝对 长 度 值 、 相 对 长 度 值 、 数 字 0、 关 键 字 thin、medium、 
thick 等 


边框 类 型 值 ”定义 容器 四 周边 框 的 类 型 ， 支 持 关键 字 none、hidden、dotted、dashed、solid、double、 
groove、Tridge、inset、outset 等 

边框 颜色 值 ”定义 容器 四 周边 框 的 颜色 ， 支 持 十 六 进 制 颜色 值 、 百 分 比 数字 函数 、 十 进 制 数字 函数 、 
颜色 的 英文 名 称 等 

inherit 定义 容器 某 种 边框 属性 由 父 元 素 中 继承 
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border 属性 可 以 同时 定义 三 种 边框 属性 ， 例 如 宽度 值 、 类 型 值 和 颜色 值 ， 在 此 种 情况 

下 不 能 使 用 inherit 属性 。 例 如 ， 定 义 一 个 容器 为 一 像素 宽度 的 黑色 实 线 ， 代 码 如 下 所 示 。 
border : lpx solid #000 ; 


只 有 当 以 上 三 种 边框 属性 值 至 少 有 一 个 没有 被 显 式 定义 时 ， 才 能 使 用 inherit 属性 。 例 
如 ， 在 下 面 的 代码 中 ， 仅 定义 了 边框 的 宽度 ， 其 他 两 项 属性 都 由 父 元 素 继 承 ， 如 下 所 示 。 


border : lpx inherit ; 


不 过 总 的 来 说 , 由 于 正 系列 的 Web 浏览 器 对 所 有 CSS 属性 的 inherit 属性 值 都 不 支持 ， 
因此 在 实际 开发 中 ， 不 推荐 使 用 inherit 属性 值 。 


3.7.5 ”容器 的 背景 和 光标 


为 容器 赋予 背景 、 修 改 鼠 标 滑 过 容器 时 显示 的 默认 光标 可 以 为 Web 元 素 呈 现 出 别致 的 
效果 ， 也 是 Web 前 端 艺 术 设计 的 重要 实现 方式 。 使 用 CSS 样式 表 ， 开 发 者 可 以 方便 地 定 
义 和 修 改 这 些 样式 属性 。 

1. 容器 的 背景 类 型 


CSS 支持 开发 者 为 容器 定义 两 种 类 型 的 背景 ， 即 图 像 背景 和 纯色 背景 。 在 定义 容器 的 
景 时 ， 可 以 使 用 background-image 属性 定义 图 像 背景 的 URL 地 址 ， 其 格式 如 下 所 示 。 


background-image : url ( URL ) : 


在 上 面 的 伪 代 码 中 ，URL 关键 字 表示 图 像 的 URL 路 径 。 例 如 ， 调 用 一 个 路 径 为 
“http://www.baidu.com/img/bdlogo.gif” 的 图 像 作为 容器 的 背景 ， 代 码 如 下 。 


background-image : url ( 'http://www.baidu.com/img/bdlogo.gif' ) ; 


如 果 需 要 定义 容器 的 背景 颜色 ， 则 可 以 使 用 background-color 属性 实现 。 
background-color 属性 的 属性 值 与 文本 的 前 景色 类 似 ， 必 须 是 十 六 进 制 数字 、 颜 色 的 英文 名 
称 、 百 分 比 数字 函数 、 十 进 制 数 字 函 数 等 类 型 的 数据 。 例 如 ， 定 义 一 个 容器 的 背景 色 为 绿 
色 ， 以 下 几 种 方式 均 是 正确 的 ， 如 下 所 示 。 


background-color : #0f0 ; 

background-color : #00ff00 > 
background-color : green; 

background-color : rgb ( 0% , 100% , 0% ) ; 
background-color : rgb ( 0, 255 ，0 ) : 


通常 情况 下 ， 图 像 背景 的 优先 级 要 比 纯色 背景 高 一 些 ， 当 同时 为 容器 定义 了 图 像 背景 
和 纯色 背景 后 ， 图 像 背 景 会 缆 盖 到 纯色 背景 上 。 另 外 需要 注意 的 是 ， 0 
是 包含 alpha 通道 的 GIF 图 像 或 PNG 图 像 ， 则 同时 定义 背景 图 像 和 背景 色 后 ， 背 景 图 像 的 
alpha 通道 区 域 会 显示 出 容器 的 背景 色 。 
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2. 容器 的 滚动 显示 模式 


CSS 支持 使 用 background-attachment 属性 定义 背景 图 像 的 滚动 显示 模式 ， 即 当 用 户 使 
用 鼠标 滚动 查看 页 面 时 , 容器 的 背景 图 像 的 位 移 状况 。 该 属性 支持 三 种 英文 关键 字 属 性 值 ， 
如 表 3-23 所 示 。 


表 3-23 ”背景 图 像 的 滚动 显示 模式 属性 值 


属性 值 作用 
scroll 默认 值 ， 定 义 背 景 图 像 在 用 户 滚动 查看 页 面 时 随 页 面 其 他 元 素 一 起 移动 
fixed 定义 背景 图 像 在 用 户 滚动 查看 页 面 时 静止 


inherit 从 父 元 素 继承 背景 图 像 的 滚动 显示 模式 


background-attachment 属性 被 应 用 于 整个 Web 页 背景 的 情况 比较 多 。 在 一 些 Blog 类 的 
Web 页 中 ， 将 一 个 整 幅 的 背景 图 像 定义 为 fixed 属性 值 ， 可 以 保证 无 论 终 端 用 户 怎样 滚动 
查看 页 面 ， 背 景 图 像 的 位 置 始终 相对 于 Web 页 的 其 他 元 素 处 于 静止 状态 。 


3. 容器 背景 的 位 置 
CSS 支持 使 用 background-position 属性 定义 背景 图 像 的 显示 位 置 ， 其 可 以 定义 背景 图 


像 相 对 于 容器 的 位 移 。background-position 属性 的 属性 值 支持 多 种 类 型 的 属性 值 。 其 中 ， 
英文 关键 字 属性 值 主要 包括 以 下 几 种 ， 如 表 3-24 所 示 。 


表 3-24 背景 图 像 的 显示 位 置 关键 字 属 性 值 


属性 值 作用 

left 定义 背景 图 像 居 左 显示 ， 即 背景 图 像 的 左 侧 和 容器 的 左 侧 对 齐 

right 定义 背景 图 像 居 右 显示 ， 即 背景 图 像 的 右 侧 和 容器 的 右 侧 对 齐 

top 定义 背景 图 像 垂 直 居 项 显示 ， 即 背景 图 像 的 顶端 和 容器 的 顶端 重合 

bottom 定义 背景 图 像 垂 直 居 底 显示 ， 即 背景 图 像 的 底 端 和 容器 的 底 端 重 合 

center 定义 背景 图 像 在 水 平 或 垂直 方向 居中 显示 ， 即 背景 图 像 的 中 心 点 和 容器 的 中 心 点 重合 


除了 采用 英文 关键 字 作为 background-position 属性 的 属性 值 外 ， 开 发 者 还 可 以 使 用 百 
分 比 、 相 对 长 度 值 和 绝对 长 度 值 来 定义 背景 图 像 相 对 容器 的 位 移 。 当 其 属性 值 为 百分比 时 ， 
参照 物 为 容器 的 宽度 和 高 度 尺寸 。 即 定义 水 平方 向 的 位 移 时 ，100% 等 于 容器 自身 的 实际 宽 
度 ; 定义 垂直 方向 的 位 移 时 ，100% 等 于 容器 自身 的 实际 高 度 。 

background-position 属性 的 属性 值 使 用 较为 复杂 ， 其 可 以 包含 一 个 单独 的 属性 值 ， 也 
可 以 同时 包含 两 个 属性 值 。 绝 大 多 数 情况 下 ， 开 发 者 在 使 用 该 属性 时 都 会 同时 定义 两 个 属 
性 值 ， 以 防止 因 省 略 属性 值 导致 的 Web 浏览 器 误 判 。 

在 使 用 双 属 性 值 定义 background-position 属性 时 ， 如 果 采 用 的 是 关键 字 属 性 ， 则 left、 
right、top 和 bottom 四 个 属性 不 能 重复 使 用 ，left 属性 值 和 right 属性 值 不 能 同时 使 用 ，top 
属性 值 和 bottom 属性 值 也 不 能 同时 使 用 ， 如 下 所 示 。 

background-position : left left ; // 错 误 的 定义 方式 


background-position : top top; // 错 误 的 定义 方式 
background-position : right right ; // 错 误 的 定义 方式 


第 3 章 ”Web 元 素 的 显示 117 


background-position : bottom bottom ; // 错 误 的 定义 方式 


background-position : left right ; // 错 误 的 定义 方式 
background-position : top bottom ; // 错 误 的 定义 方式 
background-position : left top ; // 正 确 的 定义 方式 
background-position : left bottom ; // 正 确 的 定义 方式 
background-position : left center ; // 正 确 的 定义 方式 
background-position : right top; // 正 确 的 定义 方式 


background-position : right bottom ; // 正 确 的 定义 方式 
background-position : right center ; // 正 确 的 定义 方式 
background-position : center top ; // 正 确 的 定义 方式 
background-position : center bottom ; // 正 确 的 定义 方式 
background-position : center center ; // 正 确 的 定义 方式 


如 果 采 用 的 属性 值 都 是 英文 关键 字 ， 则 这 两 个 属性 值 的 顺序 可 以 互 换 ， 例 如 下 面 的 两 
行 代码 ， 其 最 终 效果 是 一 致 的 ， 如 下 所 示 。 


background-position : left top; 
background-position : top left ; 


如 果 定 义 的 background-position 属性 值 都 是 百分比 、 相 对 长 度 值 或 绝对 长 度 值 ， 则 第 
一 个 属性 值 将 被 用 于 定义 背景 图 像 的 水 平 位 移 ， 第 二 个 属性 值 将 被 用 于 定义 背景 图 像 的 牌 
直 位 移 。 例 如 ， 定 义 背 景 图 像 在 水 平方 向 偏 移 5 像素 ， 垂 直方 向 偏 移 22pt， 代 码 如 下 。 


background-position : 5px 22pt ; 


需要 注意 的 是 ， 在 上 面 这 种 情况 下 ， 两 个 属性 值 是 不 能 调换 的 。 如 果 定 义 的 两 个 属性 
值 中 ， 一 个 属性 值 为 英文 关键 字 ， 另 一 个 属性 值 为 百分比 、 相 对 长 度 值 或 绝对 长 度 值 ， 则 
仅 有 当 关 键 字 属性 为 left、right、top 或 bottom 时 才 允 许 调换 其 书写 顺序 。 

当 background-position 属性 的 一 个 关键 字 属 性 为 left 或 right 时 ， 另 一 个 属性 必然 被 用 
于 定义 背景 图 像 的 垂直 位 移 ， 当 其 中 一 个 关键 字 属 性 为 top 或 bottom 时 ， 另 一 个 属性 必然 
被 用 于 定义 背景 图 像 的 水 平 位 移 ， 当 其 中 一 个 关键 字 属 性 为 center 时 ， 第 一 个 属性 将 被 用 
于 定义 背景 图 像 的 水 平 位 移 ， 第 二 个 属性 将 被 用 于 定义 背景 图 像 的 垂直 位 移 。 

如 果 background-position 属性 仅 包 含 一 个 属性 值 ， 则 另 一 个 属性 值 将 被 默认 设置 为 
center 或 50%。 在 未 为 容器 定义 background-position 属性 时 ，Web 浏览 器 会 默认 定义 背景 
图 像 左 上 和 角 与 容器 对 齐 ， 即 将 background-position 属性 的 属性 值 以 “top left” 或 “0px 0px” 
的 方式 处 理 。 

另外 需要 注意 的 是 ， 在 一 些 特殊 的 Web 浏览 器 (例如 Firefox、Opera 等 ) 中 ， 必 须 先 
将 容器 的 background-attachment 属性 设置 为 fxed, background-position 属性 才能 正常 工作 。 


4. 容器 的 重复 显示 方式 


CSS 支持 使 用 background-repeat 属性 定义 背景 图 像 的 重复 显示 方式 ， 其 支持 五 种 类 型 
的 属性 值 ， 如 表 3-25 所 示 。 
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表 3-25 背景 图 像 的 重复 显示 方式 属性 值 


属性 值 ”作用 属性 值 作用 
repeat ”默认 值 ， 定 义 背 景 图 像 从 水 平和 垂直 | repeat-x 定义 背景 图 像 从 水 平方 向 重复 显示 
两 个 方向 重复 显示 


repeat-y ”定义 背景 图 像 从 垂直 方向 重复 显示 
inherit ”定义 背景 图 像 从 容器 的 父 元 素 继承 重 
复 显示 方式 
例如 ， 定 义 一 个 背景 图 像 仅 在 水 平方 向 重复 显示 ， 垂 直方 向 不 重复 显示 ， 其 代码 如 下 
所 示 。 


no-repeat ”定义 背景 图 像 不 重复 显示 , 仅 显示 一 次 


background-repeat : repeat-x ; 


5. 合并 背景 样式 设置 


与 边框 属性 border 类 似 ，CSS 同样 提供 了 background 复合 属性 , 用 于 为 开发 者 提供 一 
个 简化 的 合并 背景 样式 属性 。background 复合 属性 支持 将 background-image 、 
background-color、background-attachment、background-position 以 及 background-repeat 等 属 
性 的 属性 值 合并 为 一 个 属性 值 序列 ， 实 现 简 单 而 高 效 的 背景 设置 。 

例如 ， 定 义 一 个 容器 的 背景 中 心 为 百度 的 Logo 图 标 ， 其 他 为 白色 ， 在 滚动 屏幕 的 时 
候 始 终 位 于 容器 原 位 置 的 中 央 ， 不 重复 显示 ， 代 码 如 下 。 

background : #fff url ( 'http://www.baidu.com/img/bdlogo.gif' ) no-repeat 

fixed center center ; 


在 此 需要 注意 的 是 ， 容 器 的 背景 定位 属性 background-position 的 属性 值 往往 是 一 个 属 
性 值 序列 ， 因 此 在 background 属性 中 使 用 这 一 属性 值 序列 时 ， 不 能 将 background-position 
属性 值 序列 拆 开 ， 也 就 是 说 在 上 面 的 代码 中 ， 属 性 值 “center center” 是 不 能 中 间 插 入 其 他 
属性 值 的 。 例 如 ， 以 下 写法 中 ， 前 两 种 写法 是 错误 的 ， 只 有 第 三 种 写法 是 正确 的 。 

// 错 误 的 写法 

background : top url ( 'http://www.baidu.com/img/bdlogo.gif' ) center ; 

background : left fixed repeat-x bottom ; 

// 正 确 的 写法 

background : right center scroll repeat-y ; 

在 没有 为 background 属性 的 属性 值 序列 中 添加 inherit 属性 值 时 , 其 属性 值 可 以 省 略 一 
部 分 ， 此 时 被 省 略 的 属性 值 将 被 设置 为 默认 值 。 如 果 background 属性 的 属性 值 序列 中 包含 
inherit， 则 所 有 被 省 略 的 属性 值 都 将 被 设置 为 mherit。 


3.8 ”列表 与 表格 的 样式 


列表 和 表格 是 Web 页 中 的 两 种 特殊 数据 结构 。 在 CSS 中 ， 提 供 了 多 种 类 型 的 属性 以 
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定义 这 两 种 特殊 数据 结构 的 样式 。 
3.8.1 列表 的 样式 


在 Web 页 中 ， 列 表 具 有 两 种 作用 ， 一 种 是 为 若干 并 列 关 系 的 Web 元 素 布局 ， 另 一 种 
则 是 显示 并 列 关系 的 内 容 数 据 。 在 CSS 中 ， 开 发 者 可 以 定义 列表 的 三 种 基本 属性 ， 也 可 以 
通过 指定 的 属性 同时 定义 所 有 列表 属性 。 

1. 列表 的 项 目 符号 类 型 


在 XHTML 中 ， 列 表 分 为 无 序列 表 和 有 序列 表 两 种 ， 其 区 别 在 于 无 序列 表 默 认 采 用 圆 
点 作为 列表 项 目 符号 ， 有 序列 表 则 采用 阿拉 伯 数 字 作为 列表 项 目 符号 。 在 CSS 中 ， 人 允许 开 
发 者 使 用 list-style-type 属性 灵活 地 修改 列表 项 目 符号 的 类 型 ， 其 属性 值 为 英文 关键 字 ， 如 
表 3-26 所 示 。 


表 3-26 列表 项 目 符号 的 类 型 


属性 值 作用 属性 值 作用 
none 隐藏 列表 项 目 符号 disc 无 序列 表 默 认 值 ， 以 圆 点 的 方式 显示 
列表 项 目 符号 

circle 以 圆 环 的 方式 显示 列表 项 目 符号 | square 以 实心 方块 的 方式 显示 列表 项 目 符号 

decimal 有 序列 表 默 认 值 ， 以 阿拉 伯 数 字 | lower-roman ”以 小 写 罗 马 数字 的 方式 显示 列表 项 
的 方式 显示 列表 项 目 符号 目 符号 

upper-roman ”以 大 写 罗 马 数字 的 方式 显示 列表 | lower-alpha ”以 小 写 英文 字母 的 方式 显示 列表 项 
项 目 符号 目 符号 

upper-alpha ”以 大 写 英文 字母 的 方式 显示 列表 | inherit 由 父 元 素 继承 列表 项 目 符号 
项 目 符 号 

在 上 表 的 各 种 属性 中 ，disc、circle 和 square 三 种 属性 值 常 被 应 用 于 无 序列 表 中 ， 而 


decimal、lower-roman、upper-roman、lower-alpha 和 upper-alpha 五 种 属性 值 则 常 被 应 用 于 
有 序列 表 中 。 
例如 ， 修 改 一 个 无 序列 表 的 列表 项 目 符号 为 实心 方块 ， 代 码 如 下 所 示 。 


list-style-type : square ; 


同 理 ， 修 改 一 个 有 序列 表 的 列表 项 目 符号 为 小 写 英文 字母 ， 代 码 如 下 所 示 。 


list-style-type : lower-alpha ; 


除了 以 上 属性 值 外 ，list-style-type 属性 还 支持 一 些 其 他 的 属性 值 ， 例 如 hebrew、 
armenian、cjk-ideographic 等 ， 这 些 属性 值 往往 只 针对 特殊 的 Web 浏览 器 的 显示 语言 有 效 ， 
因此 并 未 得 到 广泛 的 Web 浏览 器 支持 ， 在 此 不 再 袭 述 。 

需要 注意 的 是 ， 对 于 一 些 旧版 本 的 Web 浏览 器 〈 例 如 正 6.0 等 )， 如 果 列 表 左 侧 的 内 
填充 尺寸 小 于 2 个 字符 〈2em)， 则 列表 项 目 符号 无 法 正常 显示 。 
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2. 列表 的 项 目 符号 图 像 
除了 以 自 定义 的 一 些 列表 项 目 符号 来 标识 列表 项 目 外 ，CSS 还 支持 以 任意 的 外 部 图 像 
作为 列表 的 项 目 符号 ， 建 立 更 加 个 性 化 的 列表 元 素 ， 其 提供 了 list-style-image 属性 ， 用 于 
引用 外 部 的 符号 图 像 。 
list-style-image 属性 支持 以 下 几 种 类 型 的 属性 值 ， 如 表 3-27 所 示 。 
表 3-27 列表 项 目 符号 图 像 的 类 型 


属性 值 作用 

URL 函数 以 函数 的 方法 定义 列表 项 目 符号 图 像 引 用 的 外 部 图 像 URL 地 址 
none 禁用 列表 项 目 符号 

inherit 由 父 元 素 继承 列表 项 目 符号 的 类 型 设置 


例如 ， 使 用 一 个 URL 为 “/images/list icon.gif” 的 图 像 作 为 列表 的 项 目 符号 ， 代 码 如 
下 所 示 。 


list-style-image : url ( '/images/list icon.gif' ) ; 


在 使 用 list-style-image 属性 时 请 尽量 在 之 前 规定 一 个 list-style-type 属性 ， 以 防止 列表 
项 目 符号 图 像 在 不 可 用 时 仍然 能 够 有 一 个 列表 项 目 符号 显示 ， 如 下 所 示 。 


list-style-type : disc; 
list-style-image : url ( '/images/list icon.gif' ) ; 


3. 列表 的 项 目 符号 位 置 


除了 定义 列表 项 目 符号 的 类 型 外 ，CSS 还 支持 定义 列表 项 目 符号 的 显示 位 置 ， 此 时 需 
要 使 用 到 list-style-position 属性 。 该 属性 支持 三 种 英文 关键 字 属 性 值 ， 如 表 3-28 所 示 。 


表 3-28 ”列表 项 目 符号 位 置 属性 值 


属性 值 作用 

inside 列表 的 项 目 符号 以 位 于 列表 内 部 的 方式 显示 

outside 默认 值 ， 列 表 的 项 目 符号 以 位 于 列表 外 部 的 方式 显示 
inherit 设置 由 父 元 素 继承 列表 列表 项 目 符号 的 显示 位 置 


在 默认 状态 下 ， 无 论 有 序列 表 还 是 无 序列 表 的 项 目 符号 都 将 被 定义 为 列表 外 部 显示 ， 
如 果 需 要 手工 对 其 进行 修改 ， 则 可 以 使 用 以 下 代码 ， 如 下 所 示 。 


list-style-position : inside ; 


4. 合并 列表 样式 


CSS 提供 了 list-style 属性 ， 用 于 整体 定义 列表 的 项 目 符号 样式 设置 。 与 之 前 的 各 种 复 
合 CSS 属性 类 似 ，list-style 同时 支持 list-style-image、list-style-type 和 list-style-position 三 
种 属性 的 属性 值 合并 序列 ， 并 支持 使 用 inherit 属性 值 定义 从 父 元 素 继承 列表 的 项 目 符号 
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样式 。 

例如 ， 定 义 一 个 列表 的 项 目 符号 默认 采用 实心 方块 ， 在 可 以 获取 URL 为 
“/images/list icon gif” 的 图 像 时 采用 该 图 像 作为 项 目 符号 ， 并 定义 项 目 符号 在 列表 内 部 显 
示 ， 代 码 如 下 。 

list-style : square url ( '/images/list icon.gif' ) inside ; 


在 上 面 的 代码 中 ， 同 时 为 列表 的 项 目 符号 定义 了 三 种 属性 值 ， 可 以 大 为 简化 列表 的 项 
目 符号 设置 代码 。 


3.8.2 ”表格 的 样式 


表格 是 最 复杂 的 Web 元 素 之 一 ， 其 本 身 在 XHTML 中 由 一 个 XHTML 标记 集合 构成 ， 
包含 了 十 几 种 类 型 的 XHTML 标记 ， 是 这 十 几 种 类 型 的 标记 构成 的 一 个 整体 。 

在 不 同类 型 的 Web 浏览 器 中 , 默认 显示 的 表格 样式 是 有 所 区 别 的 。 例 如 在 旧版 本 的 下 
浏览 器 中 ,表格 的 边框 线 和 单元 格 的 边框 线 之 问 会 有 间距 ,而 在 一 些 新 版 的 其 他 Web 浏览 
器 中 ， 默 认 往 往 不 会 显示 这 些 边 框 线 。 基 于 此 理由 ， 需 要 通过 CSS 为 这 些 表格 定义 一 个 统 
-的 显示 样式 ， 提 高 Web 页 的 浏览 器 兼容 性 。 

1. 合并 表格 边 杠 


通常 情况 下 ,在 Web 页 中 如 果 同 时 设置 了 表格 和 表格 单元 格 的 边框 , 则 这 两 种 XHTML 
标记 的 边框 线 会 保持 一 定 的 边 距 ， 造 成 表格 双边 框 线 的 现象 。CSS 提供 了 border-collapse 
属性 用 于 帮助 开发 者 自 定义 这 些 边框 线 的 合并 设置 。 

border-collapse 属性 支持 三 种 英文 关键 字 属 性 ， 如 表 3-29 所 示 。 


表 3-29 ”border-collepse 属性 的 属性 值 
属性 值 。 作用 
separate 。 默认 值 ， 强 制 将 表格 和 单元 格 的 边框 分 离 
collapse ”强制 合并 所 有 表格 和 单元 格 的 边框 
inherit 由 表格 的 父 元 素 继承 表格 单元 格 合并 的 状态 


例如 ， 定 义 一 个 表格 元 素 的 单元 格 始终 处 于 合并 状态 ， 其 CSS 代码 如 下 所 示 。 
border-collapse : collapse ; 


在 此 需要 注意 的 是 , border-collapse 属性 的 优先 级 是 比较 高 的 , 一 旦 将 其 属性 值 设 置 为 
collapse， 则 之 后 介绍 的 border-spacing 属性 的 个 性 化 设置 将 被 覆盖 掉 。 

border-collapse 属性 可 以 用 于 表格 标记 (TABLE)， 也 可 以 用 于 表格 内 部 的 各 种 容器 标 
记 ， 例 如 表 头 标记 (THEAD )、 表 格 主体 标记 (TBODY)、 表 格 脚注 标记 “TFOOT)、 表 
格 行 标记 (TR) 等 。 


2. 单元 格 间距 
在 border-collapse 属性 被 忽略 或 该 属性 被 设置 为 separate 时 ， 开 发 者 可 以 通过 CSS 的 
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border-spacing 属性 定义 表格 单元 格 之 间 的 间距 。border-spacing 属性 支持 两 种 属性 值 , 一 种 
为 相对 长 度 值 或 绝对 长 度 值 ， 另 一 种 则 是 英文 关键 字 inherit， 表 示 由 父 元 素 继承 单元 格 间 
距 设 置 。 

当 开发 者 为 border-spacing 属性 定义 一 个 单独 的 长 度 属性 值 时 , 该 长 度 属性 值 将 被 应 用 
于 每 个 单元 格 之 间 ， 定 义 水 平 间 距 和 垂直 间距 均 为 这 一 长 度 属性 值 。 例 如 ， 定 义 水 平 间距 
和 垂直 间距 均 为 Spx， 代 码 如 下 。 


border-collapse : separate ; 


border-spacing : 5px ; 

开发 者 也 可 以 为 border-spacing 属性 定义 两 个 长 度 属性 值 , 此 时 , 第 一 个 长 度 属性 值 将 
被 用 于 定义 单元 格 之 间 的 水 平 间 距 ， 第 二 个 长 度 属性 值 将 被 用 于 定义 单元 格 之 间 的 垂直 间 
距 。 例如， 定义 表格 元 素 单元 格 水 平 间距 为 2px， 垂 直 间 距 为 4px， 代 码 如 下 。 


border-collapse : separate ; 
border-spacing : 2px 5px ; 


border-spacing 属性 和 border-collapse 属性 类 似 ， 可 以 用 于 表格 标记 (TABLE)， 也 可 
以 用 于 表格 内 部 的 各 种 容器 标记 ， 例 如 表 头 标记 (THEAD)、 表 格 主体 标记 (TBODY)、 
表格 脚注 标记 (TFOOT)、 表 格 行 标记 (TR) 等 。 


3. 单元 格 布局 方式 


通常 情况 下 ， 在 没有 强制 定义 表格 和 其 包含 的 单元 格 尺寸 时 ，Web 浏览 器 显示 表格 时 
会 使 用 特定 的 算法 决定 表格 尺寸 及 其 内 含 单元 格 尺寸 之 间 的 关系 。 此 时 ， 就 涉及 到 两 种 表 
格 的 尺寸 计算 方式 ， 包 括 自动 表格 算法 和 固定 表格 算法 。 

。 自动 表格 算法 

自动 表格 算法 需要 遍历 表格 中 所 有 的 单元 格 ， 根 据 这 些 单 元 格 内 容 的 多 少 来 计算 单元 
格 的 尺寸 ， 在 尽 可 能 保障 所 有 单元 格 内 容 不 换行 的 情况 下 ， 将 各 列 单元 格 的 宽度 累加 ， 最 
终 求 得 表格 的 宽度 。 绝 大 多 数 Web 浏览 器 都 采用 此 种 算法 。 

。 固定 表格 算法 

固定 表格 算法 与 自动 表格 算法 不 同 ， 其 通过 快速 读 取 表 格 第 一 行 的 单元 格 内 容 决定 表 
格 各 列 单元 格 的 宽度 ， 将 这 些 单 元 格 累加 的 宽度 作为 表格 宽度 的 基准 。 然 后 ， 将 对 超出 第 
一 行 单元 格 宽度 的 其 他 单元 格 内 容 进 行 强制 换行 。 相 比 自 动 表格 算法 ， 这 种 表格 算法 速度 
更 快 ， 更 高 效 。 

CSS 提供 了 table-layout 属性 来 帮助 开发 者 决定 选择 哪 一 种 表格 尺寸 计算 方法 , 其 属性 
值 包括 三 种 ， 如 表 3-30 所 示 。 


表 3-30 ”表格 单元 格 布局 方式 属性 值 


属性 值 作用 
automatic 。 ”默认 值 ， 以 自动 表格 算法 的 方式 布局 表格 
fixed 使 用 固定 表格 算法 的 方式 布局 表格 


inherit 由 表格 的 父 元 素 继承 表格 的 单元 格 布局 方式 
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例如 ， 定 义 一 个 表格 采用 国定 表格 算法 为 单元 格 布局 ， 代 码 如 下 。 
table-layout : fixed ; 


table-layout 属性 仅 能 应 用 于 表格 标记 TABLE, 且 仅 对 包含 多 行 数据 的 表格 有 效 。 如 果 
表格 内 仅 包 含 一 行 数据 ， 则 table-layout 属性 将 不 起 作用 。 


3.9 小 结 


CSS 样式 表 由 传统 的 HTML 语言 中 各 种 描述 性 的 标记 和 属性 衍生 而 来 , 专门 针对 Web 
页 的 各 种 显示 效果 而 设计 ， 用 于 帮助 开发 者 编写 更 加 纯粹 的 、 数 据 化 的 XHTML 语言 。 在 
标准 化 的 Web 开发 中 ，CSS 样式 逐渐 起 到 了 越 来 越 重要 的 作用 ， 提 高 了 Web 代码 的 简洁 
性 和 规范 性 ， 有 效 地 改善 了 传统 Web 开发 中 结构 与 表现 内 容 混合 编码 的 状况 ， 实 现 了 前 端 
结构 与 表现 的 松 耦合 。 

本 章 详细 介绍 了 Web 开发 中 的 松 耦 合 概念 ， 以 及 现代 Web 前 端 开发 的 基本 要 求 ， 通 
过 CSS 的 选择 器 、 属 性 以 及 属性 值 等 实体 的 介绍 ， 帮 助 开 发 者 了 解 CSS 的 基础 语法 。 然 
后 ， 在 此 基础 上 介绍 了 文本 内 容 、 各 种 布局 容器 以 及 列表 和 表格 等 Web 元 素 的 CSS 样式 
设计 。 基 于 这 些 知识 ， 开 发 者 将 可 以 独力 地 制作 出 简单 的 静态 页 面 ， 为 开发 复杂 交互 界面 
打下 一 个 坚实 的 基础 。 


第 2 篇 进 阶 篇 


Web 页 面 是 目前 最 流行 的 互联 网 交互 平台 ， 其 本 身 除 了 通过 XHTML、 
HTML 和 CSS 样式 表 向 用 户 展示 内 容 以 外 , 还 通过 丰富 的 脚本 来 为 用 户 提供 更 
多 交互 性 的 体验 ， 以 大 量 灵 活 地 响应 来 为 终端 用 户 提供 服务 。 

Javascript 就 是 这 样 一 种 主要 基于 Web 交互 应 用 的 脚本 语言 。 早 期 的 
Javascript 仅仅 立足 于 事件 触发 的 一 些 简单 脚本 ， 但 随 着 互联 网 的 发 展 以 及 现代 
Web 开发 技术 的 逐渐 演进 ，Javascript 已 经 逐渐 发 展 成 为 一 门 复杂 而 功能 强大 的 
中 等 体 量 编程 语言 ， 其 灵活 的 语法 、 丰 富 的 功能 不 断 地 由 更 多 开发 者 发 据 出 来 。 

本 篇 将 对 Javascript 脚本 语言 的 基本 语法 、 数 据 处 理 、 基 于 面向 对 象 的 各 种 
语言 特性 和 设计 思想 进行 详细 介绍 ， 同 时 还 将 以 较 大 的 篇 幅 来 对 Web 前 端的 各 
种 对 象 和 交互 技术 进行 深入 挖 据 ， 全 面 展现 Javascript 在 Web 前 端 中 的 应 用 ， 
为 开发 者 学 习 YUI 框架 打下 基础 。 
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传统 的 Web 制作 往往 是 基于 XHTML 结构 语言 和 CSS 样式 表 为 用 户 展示 简单 的 显示 
内 容 ， 通 过 超 链接 这 一 方式 实现 与 用 户 最 基础 的 交互 ， 满 足 用 户 最 简单 的 使 用 需求 。 

现代 Web 开发 所 面 对 的 用 户 群 体 更 加 复杂 ， 其 对 Web 交互 和 设计 效果 的 需求 也 更 高 
开发 者 不 得 不 以 更 复杂 的 手段 满足 这 些 用 户 群 体 日 趋 严格 的 使 用 需要 。 此 时 ， 基 本 的 
XHTML 结构 语言 和 CSS 样式 表 已 无 法 满足 用 户 的 交互 需求 ，Web 脚本 的 作用 逐渐 体现 出 
来 ， 开 发 者 需要 使 用 Javascript 脚本 语言 来 实现 更 复杂 的 前 端 计算 。 

如 今 ， 基 于 Javascript 脚本 语言 的 前 端 项 目 应 用 越 来 越 普 壳 ， 一 些 前 端 项 目 甚至 已 经 
开始 逐步 取代 后 端 程序 开发 语言 的 作用 ， 实 现 了 诸如 权限 判定 、 内 容 验证 等 复杂 的 计算 功 
能 ， 这 些 都 得 益 于 Javascript 脚本 语言 强大 而 丰富 的 计算 功能 。 


4.1 以 交互 为 核心 的 Web 


Web 页 最 初 被 建立 的 目的 是 作为 计算 机 程序 的 一 种 简单 替代 品 ,实现 在 线 的 内 容 展示 。 
随 着 前 端 技术 逐渐 地 发 展 ， 简 单 的 传统 静态 页 面 越 来 越 无 法 满足 用 户 使 用 的 需求 ， 因 此 诞 
生 了 以 交互 为 核心 的 Web， 这 一 概念 的 提出 ， 极 大 地 改变 了 整个 互联 网 世界 。 

在 WWW 最 初 在 欧洲 原子 能 研究 组 织 诞生 之 时 ，Web 页 的 作用 仅仅 是 向 世界 各 地 的 
Web 用 户 展示 各 种 技术 文档 和 科学 文献 ， 此 时 的 Web 页 更 注重 内 容 的 展示 , 一 切 设计 都 以 
内 容 展 示 为 核心 。 

这 种 Web 页 通常 不 需要 什么 复杂 交互 ,使 用 第 一 代 的 HTML 语言 即 可 实现 所 有 需求 。 
例如 世界 上 第 一 个 Web 站 点 就 是 基于 最 基本 的 HTML 语言 构成 ， 如 图 4-1 所 示 。 
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图 4-1 WWW 的 第 一 个 Web 页 


第 4 章 开发 Web 脚本 127 


随 着 互联 网 的 快速 发 展 ，WWW 早已 不 再 单独 局 限于 学 术 使 用 ， 已 经 逐渐 成 为 公众 获 
取信 息 的 重要 渠道 .公众 对 Web 页 的 要 求 也 从 简单 的 内 容 显示 逐渐 演变 为 更 加 美观 的 Web 
内 容 显 示 ， 使 得 XHTML 和 CSS 等 技术 得 以 大 显 身 手 ， 各 种 以 CSS 技术 设计 和 美化 的 静 
态 Web 页 飞速 增长 。 

例如 ， 著 名 的 CSS 技术 网 站 CSS 禅 意 花园 (http://www.csszengarden.com) 就 是 典型 
的 以 XHTML 和 CSS 构建 的 静态 Web 页 ， 其 支持 全 世界 的 开发 者 和 设计 者 使 用 标准 化 的 
CSS 为 其 设计 和 制作 界面 效果 ， 如 图 4-2 所 示 。 


CO wm peo Ocss an eosen maoo “| 


en 
Garden 


The Road ro Enlightenment 
Ademonstration of what «Utering a dak and dreary road lay the past relics of browser specifie tags, incompatible 


DOMs brokan CSS appor and abandoned browsers 
can be aceomplished . 有 


Uhrough C35-based design. We mast cioar the mind of the Past Web ealightenment has been achived thanks to the 


可 WaC, WasP, spd the major 
ye traless efforts of Folk Le the WaC, WasP, and the major Mrowser reators, 


she list to load it into this «The CSS Zen Garden lnvites You to relax and meditate on he lmportaat lessons of the 
masters. Begin to se¢ with clarity, learn to vse the time honored techiques in new and 
invigorating fzshioa. Eecoms one with the web, 


mn 
participation To begin view some of th edisting designs in the 
Joad the style sheet into this very page The HTML mmainy 

the same, the orly thing that has changed ts the external CSS fle Yes really. 


CSS lows complete and total contral over the styie of 3 hypertert Gorement. The ony way this can be lactrared tn away 
that gets peopie esched ls by demonstrating what It can tnaly be, once the relrs are placed In he hands of those atie to creale 
boauty from strecture. Designers and coders akehave coatribatod to the beauty cf the wob; we can aivays push it farther, 


Parriciparion 
图 4-2 CSS 禅 意 花园 的 Web 页 


使 用 XHTML 和 CSS 技术 构建 的 静态 Web 页 虽然 极 大 地 提高 了 Web 页 的 观赏 性 ， 使 
得 传统 的 Web 页 面 更 加 美观 ， 但 是 由 于 其 自身 技术 的 限制 ， 对 用 户 交 互 方面 的 支持 极其 
有 限 。 

随 着 用 户 对 Web 项 目 需求 的 逐渐 复杂 化 以 及 前 端 显示 设备 的 多 样 化 (由 传统 的 PC 逐 
步 演化 为 各 种 PC、 平 板 电脑 、 智 能 手机 、 数 字 机 项 盒 甚至 智能 手表 和 智能 眼镜 等 )， 这 种 
纯 静 态 的 页 面 已 经 无 法 满足 用 户 更 高 的 交互 需求 ， 因 此 ，Web 开发 者 不 得 不 在 前 端 开发 方 
向 倾注 更 多 的 精力 ， 使 用 更 加 复杂 的 开发 技术 满足 用 户 的 需求 。 

种 种 以 上 的 复杂 需求 改变 了 Web 开发 的 流程 ， 使 得 Web 前 端 开发 更 加 趋向 于 复杂 化 ， 
从 根本 上 终结 了 静态 Web 页 包 打 天 下 的 局 面 。 现 代 的 Web 前 端 开发 更 加 注重 交互 的 便捷 
性 和 通信 的 即时 性 ， 通 过 以 交互 为 核心 的 Web 应 用 为 用 户 提供 更 加 便捷 的 服务 。 


4.2 使 用 脚本 语言 


现代 的 Web 前 端 开发 更 加 注重 通过 各 种 交互 脚本 语言 来 快速 响应 用 户 的 交互 需求 , 从 
而 实现 丰富 的 前 端 交互 效果 和 服务 器 端 即时 通信 。 前 端 Web 开发 的 交互 脚本 核心 即 以 
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Javascript 脚本 语言 和 XHTML DOM 结合 形成 的 前 端 应 用 程序 ， 在 开发 这 类 应 用 程序 时 ， 
首先 需要 了 解 的 就 是 如 何 使 用 脚本 语言 。 


4.2.1 Javascript 脚本 语言 简介 


Javascript 脚本 语言 是 被 Web 浏览 器 逐 行 解析 的 、 面 向 对 象 的 、 动 态 弱 类 型 的 、 基 于 
ECMAScript 标准 的 脚本 语言 ， 其 被 广泛 应 用 于 Web 浏览 器 的 动态 交互 开发 ， 通 过 对 各 种 
Web 元 素 的 操作 和 控制 来 实现 用 户 交 互 。 

Javascript 脚本 语言 是 Web 前 端 开发 的 重要 组 成 部 分 ， 在 Web 前 端 开 发 中 ，Javascript 
通常 用 于 完成 以 下 几 种 任务 。 

。 操作 文档 结构 元 素 

Javascript 脚本 语言 本 身 并 不 能 直接 操作 Web 文档 中 的 XHTML 结构 代码 ， 但 是 其 可 
以 通过 XHTML 结构 语言 提供 的 DOM (Document Object Models， 文 档 对 象 模 型 ) 来 快速 
读 取 、 写 入 XHTML 结构 ， 实 现 对 文档 结构 元 素 的 控制 。 

。 操作 样式 表 

XHTML 结构 语言 的 DOM 还 提供 了 对 XHTML 结构 标记 的 CSS 样式 进行 读 写 的 接口 ， 
因此 通过 XHTML 的 DOM，Javascript 也 可 以 间接 地 操作 XHTML 结构 的 CSS 样式 表 。 各 
种 基于 Javascript 脚本 实现 的 动画 、 交 互通 常 都 是 以 该 方式 实现 的 。 

。 操作 Web 浏览 器 

与 XHTML 结构 语言 类 似 ，Web 浏览 器 通常 也 会 提供 一 些 额外 的 接口 ， 这 些 接口 的 调 
度 方式 与 XHTML 的 DOM 类 似 ， 也 被 称 作 BOM (Browser Object Models， 浏 览 器 对 象 模 
型 )。 通 过 BOM，Javascript 也 可 以 操作 一 些 Web 浏览 器 实现 一 些 功能 ， 例 如 读 取 Web 浏 
览 器 的 信息 、 操 作 Web 浏览 器 执行 一 些 简单 命令 等 。 

。 与 服务 器 快速 交互 

Javascript 脚本 语言 的 一 种 最 重要 的 应 用 就 是 通过 局 部 提交 和 数据 获取 , 与 服务 器 端 程 
序 进行 快速 的 数据 交互 ， 从 而 实现 比 传统 的 POST 和 GET 提交 更 加 便捷 的 数据 传输 ,提高 
页 面 的 动态 加 载 效率 ， 避 免 在 数据 交互 时 刷新 页 面 而 造成 的 用 户 操作 不 便 。 


4.2.2 为 文档 插入 脚本 


在 前 端 开 发 中 ， 开 发 者 可 以 通过 两 种 方式 为 Web 页 插入 Javascript 脚本 语言 ， 一 种 是 
通过 外 部 的 脚本 文件 将 脚本 代码 载 入 当前 文档 ; 另 一 种 则 是 直接 在 Web 页 的 XHTML 结构 
代码 中 书写 脚本 代码 。 第 一 种 被 称 作 外 部 脚本 ， 而 第 二 种 则 被 称 作 内 部 脚本 。 

1. 加 载 外 部 脚本 

外 部 脚本 与 之 前 介绍 的 外 部 CSS 类 似 ， 都 是 通过 URL 定位 一 个 外 部 的 文档 ， 通 过 将 
外 部 的 文档 加 载 到 当前 Web 页 实现 脚本 内 容 的 载 入 。 在 使 用 外 部 脚本 时 ， 需 要 先 创建 一 个 
扩展 名 为 “js” 的 外 部 脚本 文件 ， 在 脚本 文件 中 书写 Javascript 代码 ， 将 其 保存 到 指定 的 位 
置 。 然 后 ， 即 可 使 用 XHTML 结构 语言 的 脚本 标记 (SCRIPT)， 通 过 其 指定 的 src 属性 将 
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脚本 文件 的 URL 与 Web 文档 关联 ， 加 载 外 部 脚本 。 脚 本 标记 (SCRIPT) 支持 以 下 几 种 属 
性 ， 如 表 4-1 所 示 。 


表 4-1 脚本 标记 SCRIPT 的 属性 


属性 属性 值 是 否 必 选 ”作用 DTD 
type MIME 类 型 是 定义 脚本 的 MIME 类 型 STF 
charset ”字符 集 否 定义 脚本 的 字符 集 SIF 
defer defer 否 定义 脚本 在 Web 文档 加 载 完 成 后 再 执行 STF 
language ”脚本 名 称 否 定义 脚本 语言 的 名 称 TF 
src URL 否 定义 加 载 外 部 脚本 文件 的 URL 地 址 SIF 


在 加 载 外 部 脚本 时 ， 直 接 为 脚本 标记 (SCRIPT) 添加 type 属性 ， 设 置 type 属性 为 
“text/javascript”， 并 将 脚本 文件 的 URL 作为 src 属性 的 属性 值 加 载 即 可 。 例 如 ， 为 Web 文 
档 加 载 一 个 URL 为 “/Scripts/defaultjs” 的 文件 ， 代 码 如 下 。 


<script type="text/javascript" src="/Scripts/default.js"></script> 


脚本 标记 (SCRIPT) 是 一 种 闭合 标记 ， 在 使 用 该 标记 时 ， 需 要 用 结束 标记 将 其 正确 地 

闭合 。 在 XHTML 结构 语言 的 规范 中 ， 并 未 强制 限制 脚本 标记 出 现在 Web 文档 中 的 位 置 ， 
其 不 仅 可 以 存在 于 文档 头 标记 (HEAD) 中 ， 也 可 以 存在 于 文档 主体 标记 (BODY) 中 。 
在 实际 开发 中 ， 为 使 页 面 加 载 效率 更 高 ， 通 常情 况 下 会 将 所 有 加 载 外 部 脚本 的 脚本 标记 放 
在 文档 主体 标记 (BODY) 的 末尾 。 
外 部 脚本 的 优势 在 于 ， 其 可 以 被 多 个 Web 文档 加 载 和 使 用 , 通常 以 外 部 脚本 的 方式 存 
在 的 代码 具有 极 高 的 复 用 性 。 因 此 ， 几 乎 所 有 大 型 的 Web 项 目 中 ， 用 于 逻辑 处 理 、 框 架构 
建 的 底层 脚本 代码 都 是 以 外 部 脚本 的 形式 存在 。 在 实际 开发 中 ， 建 议 开发 者 以 模块 化 的 方 
式 规划 项 目的 代码 ， 提 高 代码 的 复 用 性 ， 然 后 将 所 有 可 复 用 的 代码 都 放 在 外 部 文档 中 ， 通 
过 外 部 加 载 的 方式 载 入 到 Web 页 。 


2. 加 载 内 部 脚本 


内 部 脚本 是 指 书 写 在 Web 文档 内 部 的 Javascript 脚本 ， 与 外 部 脚本 相似 ， 内 部 脚本 也 
必须 通过 XHTML 结构 语言 的 脚本 标记 才能 正确 地 应 用 在 Web 页 中 。 在 编写 内 部 脚本 时 ， 
同样 需要 使 用 XHTML 结构 语言 的 脚本 标记 (SCRIPT)， 通 过 脚本 标记 标识 代码 的 类 型 。 

与 外 部 脚本 有 所 区 别 的 是 ， 内 部 脚本 在 使 用 脚本 标记 (SCRIPT) 时 不 需要 定义 脚本 的 
URL, 仅 需要 声明 脚本 的 MIME 类 型 即 可 。 例 如 ,在 下 面 的 代码 中 , 就 通过 脚本 标记 SCRIPT 
定义 了 一 段 内 部 脚本 ， 如 下 所 示 。 


<script type="text/javascript"> 

/** 

@class UIProject 

@constructs 

Q@augments System.Object 

Q@exports UIProject as System.Object 
*/ 
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var UIProject = function ( ) { 


} 
</script> 


在 上 面 的 代码 中 ,用 脚本 标记 (SCRIPT) 定义 了 一 个 项 目的 基础 类 。 虽然 内 部 脚本 的 
加 载 效率 要 比 外 部 脚本 多 少 快 一 些 ， 但 是 在 实际 的 项 目 开 发 中 ， 除 非 编写 的 是 完全 不 需要 
复 用 的 代码 ， 否 则 请 尽量 将 脚本 代码 存放 在 外 部 文件 中 以 提高 代码 的 复 用 性 和 维护 性 。 


3. 脚本 加 载 位 置 


Javascript 脚本 在 页 面 的 加 载 时 主要 有 两 种 加 载 方式 ， 即 前 置 加 载 和 末端 加 载 。 这 两 种 
方式 各 有 优 缺 点 ， 在 实际 开发 中 应 酌情 选择 。 

。 前 置 加 载 

在 传统 的 Web 开发 中 , 无 论 是 加 载 外 部 脚本 还 是 内 部 脚本 , 绝 大 多 数 开发 者 通常 会 在 
Web 文档 的 文档 头 标记 (HEAD) 内 使 用 脚本 标记 〈SCRIPT)， 也 就 是 在 页 面 加 载 时 ， 强 
制 首先 加 载 Javascript 脚本 ， 再 加 载 Web 文档 自身 的 其 他 XHTML、HTML 元 素 以 及 其 他 
类 型 的 数据 ， 这 种 方式 被 称 作 前 置 加 载 。 

前 置 加 载 的 优点 在 于 ， 其 可 以 强制 以 最 优先 级 的 方式 加 载 Javascript 脚本 ， 在 网 速 较 
慢 的 情况 下 ， 可 以 避免 用 户 操 作 时 因 脚 本 未 加 载 完 成 而 导致 的 错误 响应 。 同 时 ， 在 一 些 强 
制 使 用 Javascript 控制 页 面 加 载 以 及 整体 数据 维护 的 应 用 中 ， 前 置 加 载 也 可 以 防止 内 容 显 
示 的 各 种 错误 。 

但 是 前 置 加 载 本 身 也 是 存在 一 些 问题 的 ， 尤 其 在 页 面 需要 加 载 大 量 的 脚本 〈 例 如 各 种 
框架 、 代 码 库 ) 时 ， 会 严重 降低 页 面 加 载 的 速度 ， 增 大 了 用 户 等 待 页 面 加载 的 时 间 。 而 且 ， 
一 些 DOM 操作 的 脚本 只 能 在 整个 XHTML、HTML 内 容 加 载 完成 后 才能 检索 到 对 应 的 
DOM 元 素 , 如 果 尚 未 加 载 完 成 这 些 DOM 元 素 , 则 这 些 DOM 操作 的 脚本 往往 会 报告 错误 。 

在 实际 开发 中 ， 如 果 开 发 者 仅仅 编写 了 一 些 函 数 ， 通 过 按钮 等 控件 来 调用 ， 则 此 种 方 
式 完 全 适用 。 

。 末端 加 载 

现代 的 Web 开发 者 们 更 推荐 以 末端 加 载 的 方式 为 Web 文档 添加 脚本 ， 即 将 脚本 标记 
(SCRIPT) 放置 在 文档 主体 标记 (BODY) 的 末尾 ， 按 照 指 定 的 顺序 ， 在 文档 的 HTML、 
XHTML 和 CSS 加 载 完毕 后 再 依次 加 载 脚本 内 容 。 

这 种 方式 的 优点 在 于 ， 如 果 页 面 需要 加 载 大 量 的 脚本 ， 优 先 加 载 页 面 中 的 显示 内 容 可 
以 让 用 户 更 快 地 浏览 这 些 内 容 ， 在 用 户 浏览 内 容 完成 后 进行 交互 操作 时 ， 通 常情 况 下 脚本 
内 容 已 经 加 载 完毕 ， 用 户 体 验 较 好 。 同 时 ， 如 果 脚 本 中 包含 了 DOM 操作 ， 则 末端 加 载 脚 
本 也 可 以 避免 DOM 元 素 无 法 查找 的 错误 。 

末端 加 载 也 存在 一 些 问 题 。 通 常情 况 下 ， 如 果 网 速 较 慢 ， 将 脚本 加 载 放 置 在 页 面 加 载 
的 末尾 , 可 能 造成 文档 加 载 完毕 但 脚本 尚未 加 载 完 成 , 使 得 页 面 的 一 些 交 互 功 能 无 法 实现 。 
另外 , 一 些 用 来 处 理 页 面 显示 样式 的 脚本 (例如 判断 客户 端 类 型 从 而 决定 加 载 页 面 的 版 本 、 
语言 之 类 的 脚本 ) 如 果 都 放 在 页 面 末 端 加 载 ， 也 会 使 页 面 加 载 效 率 进一步 降低 。 

在 实际 开发 中 ， 如 果 开 发 者 需要 加 载 前 端 框架 以 及 诸多 复杂 的 业务 逻辑 代码 ， 则 可 以 
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选择 此 种 方式 ， 以 提高 页 面 显示 内 容 的 加 载 速度 ， 同 时 根据 脚本 的 加 载 状况 来 激活 各 种 交 
互 事件 。 提 高 页 面 显 示 内 容 加 载 效率 的 同时 ， 末 端 加 载 保 障 所 有 内 容 加 载 完 成 后 才 允 许 用 
户 进行 交互 操作 ， 防 止 脚 本 加 载 未 完成 时 产生 各 种 错误 。 


4.2.3 ” Javascript 语 ; 


计算 机 编程 语言 是 由 自然 语言 演化 而 来 ， 是 为 计算 机 代码 编译 程序 (针对 Javascript， 
这 一 编译 程序 通常 为 Web 浏览 器 ) 设计 的 一 种 特殊 的 人 造 语言 。 这 种 语言 与 其 他 语言 的 区 
别 在 于 ， 其 设计 目的 并 非 用 于 人 与 人 之 间 的 交流 ， 而 是 用 于 人 与 指定 的 计算 机 语言 解析 程 
序 交 流 。 由 于 计算 机 语言 解析 程序 的 解析 能 力 限 制 ， 计 算 机 编程 语言 必须 按照 较 自然 语言 
更 加 严格 和 刻板 的 语法 才能 使 计算 机 更 精准 而 高 效 地 解析 。 

与 其 他 编程 语言 类 似 ，Javascript 也 具有 其 自身 规范 化 的 语法 , 通过 指定 格式 的 书写 规 
范 和 格式 规范 各 种 实体 和 语义 内 容 。 


1. 脚本 代码 的 组 成 


Javascript 脚本 代码 是 由 语句 和 语句 块 组 成 的 。 其 中 ， 语 句 是 最 基本 的 代码 构成 单位 ， 
语句 块 可 以 包含 若干 语句 ， 也 可 以 与 其 他 语句 并 列 存 在 。 

. 语 各 

语句 是 Javascript 代码 的 基本 构成 单位 ， 是 代码 逐 行 解析 和 执行 时 的 依据 。 依 照 
Javascript 脚本 语言 的 基本 规范 ， 所 有 Javascript 的 代码 都 必须 存放 在 语句 中 。 语 句 可 以 独 
占 一 行 , 也 可 以 分 布 于 多 行 。 每 一 个 语句 都 应 以 英文 分 号 “;” 作 为 结尾 。 在 下 面 的 代码 中 ， 
就 创建 了 一 个 最 简单 的 Javascript 语句 。 


window.alert ( 'Hello,World' ) ; 


在 上 面 的 代码 中 ， 通 过 Javascript 调用 XHTML DOM 中 Window 对 象 的 alert0 方 法 输 
出 了 一 个 字符 串 ， 实 现 了 简单 的 Hello World 程序 。 

。 语句 块 

语句 块 是 若干 条 语句 的 集合 。Javascript 的 语句 块 大 体 可 以 分 为 两 类 ， 一 类 是 封装 类 语 
句 ， 其 可 以 将 若干 条 语句 封装 为 一 个 整体 ， 整 合 为 一 个 标识 供 语句 快速 调用 ， 例 如 函数 就 
属于 这 一 类 ; 另 一 类 则 是 流程 类 语句 块 ， 其 作用 是 根据 指定 的 类 型 干涉 其 内 含 的 语句 执行 
先后 顺序 和 方式 ， 例 如 分 支流 程 、 迭 代 流 程 等 类 型 的 语句 块 就 属于 这 一 类 。 

语句 块 的 结构 通常 如 下 所 示 。 


Command1l 


{ 


Statements ; 
} [Command2 ;] 
在 上 面 的 伪 代 码 中 ，Command1 关键 字 表示 语句 块 的 类 型 标记 ， 其 可 以 是 语句 块 的 名 
称 ， 也 可 以 是 一 段 代码 〈 例 如 函数 的 名 称 和 参数 等 )。Command2 关键 字 为 语句 块 的 补充 命 
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令 ， 其 通常 用 于 do...while 类 语句 中 。 语 句 块 包含 的 语句 必须 书写 在 大 括号 内 ， 语 句 块 和 
语句 块 可 以 相互 嵌 套 。 


2. 脚本 代码 的 书写 


在 书写 Javascript 脚本 代码 时 需要 注意 ，Javascript 脚本 语言 是 一 种 对 大 小 写 敏 感 的 编 
程 语言 。 虽 然 一 些 Web 浏览 器 可 以 忽略 部 分 关键 字 、 运 算 符 的 大 小 写 区 分 ， 但 是 在 书写 代 
码 时 应 养 成 良好 的 书写 习惯 ， 不 能 混用 大 写 和 小 写字 母 。 


3. 实体 


实体 (Entity) 是 计算 机 软件 开发 领域 的 一 个 特定 术语 ， 其 表示 计算 机 软件 开发 过 程 中 
所 有 以 语句 为 基础 组 成 的 代码 模块 。 在 Javascript 脚本 语言 中 ， 存 在 有 两 种 实体 ， 一 种 实 
体 是 指 Javascript 本 身 概 念 定义 的 基本 实体 ， 例 如 变量 、 常 量 、 对 象 、 函 数 、 函 数 参数 、 
函数 返回 值 等 。 另 一 种 ， 则 是 通过 面向 对 象 的 程序 设计 规范 强制 规定 的 扩展 实体 ， 其 主要 
包括 包 、 命名 空间 、 类 、 属 性 、 方 法、 实例 等 。 需要 注意 的 是 , 这些 扩 展 实体 并 非 Javascript 
语法 中 包含 的 元 素 ， 而 是 通过 基本 实体 衍生 而 来 的 虚拟 实体 。 

实体 的 概念 在 Javascript 中 十 分 重要 ， 实 际 上 Javascript 最 主要 的 编程 功能 就 是 处 理 这 


4.3 Javascript 数据 基础 


Javascript 脚本 语言 是 一 种 动态 的 弱 类 型 脚本 语言 , 其 语法 多 借鉴 自 一 些 传 统 的 大 型 程 
序 开发 语言 ， 例 如 Java、C、C++ 等 。 但 是 相 比 这 些 大 型 程序 开发 语言 ，Javascript 又 有 其 
自身 的 特性 。 在 学 习 Javascript 脚本 语言 之 前 ， 首 先 应 了 解 Javascript 脚本 语言 中 的 数据 。 


4.3.1 变量 与 常量 


数据 是 计算 机 程序 开发 中 的 最 基础 的 实体 。 在 计算 机 编程 语言 中 创建 一 条 数据 ， 其 原 
理 就 是 在 计算 机 内 存 地 址 中 标识 出 一 块 空间 ， 将 其 赋予 某 一 个 已 定义 的 名 称 。 根 据 这 段 内 
存 地址 的 读 写 性 ， 又 可 将 其 分 为 变量 和 常量 两 种 。 


1. 变量 


变量 来 源 于 数学 的 解析 几何 ， 在 计算 机 语言 中 指 在 初始 化 或 实例 化 后 ， 允 许 被 修改 、 
重新 赋值 或 自 运 算 的 数据 。Javascript 支持 自 定义 变量 的 实例 名 称 ， 允 许 使 用 实例 名 称 访问 
变量 ， 并 允许 对 这 些 变量 进行 重新 初始 化 、 重 新 赋值 或 自 运算 。 

Javascript 通过 var 运算 符 声 明 变 量 ， 在 声明 变量 时 既 可 以 直接 声明 变量 ， 也 可 以 在 声 
明 变 量 后 对 变量 赋值 。 在 下 面 的 代码 中 ， 就 分 别 通过 两 个 语句 声明 了 两 个 变量 ， 并 对 第 二 
个 变量 进行 了 赋值 。 
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var undTestVariable ; 


Var intTestInteger = 0 :7 


在 一 个 Javascript 语句 中 也 可 以 同时 声明 多 个 变量 并 为 其 中 任意 个 数 的 变量 赋值 。 例 
可 以 将 上 面 的 语句 以 下 面 的 方式 书写 ， 如 下 所 示 。 


如 

var undTestVariable , intTestInteger = 0; 

在 上 面 的 代码 中 ， 在 同一 条 var 语句 中 声明 了 两 个 变量 ， 并 为 第 二 个 变量 进行 了 赋值 
操作 , 此 时 , 需要 用 英文 逗号 “,” 将 两 个 变量 分 开 。 这 种 方式 在 语法 上 是 完全 符合 Javascript 
规范 的 ， 但 是 在 实际 开发 中 ， 应 尽量 做 到 每 个 声明 的 变量 都 有 独立 的 注释 ， 因 此 不 推荐 使 
用 这 种 方式 。 


2. 常量 


常量 在 数学 中 是 由 基础 的 数字 延伸 而 来 ， 在 计算 机 中 指 在 被 标记 为 只 读 的 数据 。 作 为 
弱 类 型 动态 脚本 语言 ，Javascript 自身 不 支持 自 定义 名 称 的 常量 ， 但 是 支持 将 一 个 指定 的 值 
作为 “ 伪 常 量 ”使 用 。 和 常量 不 可 以 被 赋值 。 例 如 ，3.45、'action'、false 等 数据 值 都 是 典型 
的 常量 。 

虽然 Javascript 不 支持 语义 上 的 常量 ， 但 在 实际 的 应 用 开发 中 ， 可 以 强制 地 指定 一 些 
变量 为 只 读 ， 从 开发 规范 上 禁止 对 这 些 变量 进行 再 次 赋值 或 自 运算 ， 制 造 出 “ 伪 常 量 ” 以 
满足 一 些 特殊 的 需求 。 


4.3.2 ”数据 类 型 


计算 机 在 处 理 不 同类 型 的 数据 时 使 用 的 方法 是 有 所 区 别 的 。 在 传统 的 强 类 型 编程 语言 
中 ， 如 果 完 全 依靠 计算 机 识别 数据 的 类 型 然后 区 分 处 理 ， 则 计算 机 往往 需要 耗费 较 多 的 资 
源 ， 而 且 最 终 处 理 的 结果 也 往往 不 尽 如 人 意 。 


1， 原 始 数据 类 型 


基于 帮助 计算 机 处 理 数据 的 需要 ， 编 程 语言 的 设计 者 们 往往 会 将 各 种 数据 按照 其 特性 
进行 分 类 ， 强 制 要求 开 发 者 在 使 用 这 些 编程 语言 创建 数据 时 先 定义 数据 的 类 型 。 作 为 一 种 
脚本 语言 ，Javascript 脚本 语言 虽然 在 数据 分 类 上 与 强 类 型 编程 语言 有 所 区 别 ， 但 是 仍然 支 
持 对 一 些 基 础 的 数据 进行 简单 分 类 ， 这 些 类 型 又 被 称 作 原 始 数据 类 型 。 

。 字符 串 

字符 串 类 型 的 数据 用 于 存储 各 种 语言 的 文字 和 符号 , 例如 拉丁 字母 、 中 文 、 标 点 符号 、 
空格 等 数据 都 属于 字符 串 类 型 。 在 下 面 的 代码 中 ， 就 声明 了 一 个 字符 串 类 型 的 数据 ， 并 为 
其 初始 赋值 。 


Var strLanguageName = "Javascript"' ; 


字符 串 类 型 数据 的 特点 就 是 其 必须 被 单 引 号 “"” 或 双 引 号 “""” 环 绕 。Javascript 将 所 
有 以 单 引号 “"” 或 双 引 号 “""” 环 绕 的 内 容 都 当 作 普 通 字符 串 来 处 理 , 例如 , 'A'、 '15'、'false' 


134 高 效 Web 前 端 开发 之 路 一 一 YUI 3.15 


等 变量 都 属于 字符 串 类 型 。 

与 其 他 编程 语言 不 同 ，Javascript 脚本 语言 中 的 字符 串 类 型 数据 并 不 限制 固定 的 大 小 ， 
理论 上 ， 开 发 者 可 以 将 任意 数量 的 Unicode 或 其 他 编码 的 字符 集合 起 来 作为 字符 串 类 型 数 
据 使 用 。 

除了 普通 字符 外 ， 还 有 一 些 特殊 的 字符 在 字符 串 类 数据 内 部 起 到 特定 的 转 义 作用 ， 被 
称 作 转 义 符 。 常 用 的 转 义 符 包 括 如 下 几 种 ， 如 表 4-2 所 示 。 


表 4-2 常用 的 转 义 符 字符 串 


转 义 符 ”作用 

un 换行 符 

上 制 表 符 

vb 空格 符 

9 回 车 符 

¥ 分 页 符 

\ 反 斜 杠 “\” 
' 单 引号 “"” 
v 双 引 号 “mm” 


\Onnn 八进制 代码 nnn 表示 的 字符 (n 为 0 到 7 之 间 的 八进制 数字 ) 
nn 十 六 进 制 代码 nn 表示 的 字符 (n 为 0 到 f 之 间 的 十 六 进 制 数字 ) 
\unnnn 十 六 进 制 代码 nnnn 表示 的 Unicode 字符 (n 为 0 到 f 之 间 的 十 六 进 制 数 字 》 


在 实际 开发 中 , 经 常会 需要 将 XHTML 代码 以 字符 串 的 形式 存放 ,以 对 XHTML DOM 
进行 操作 ， 此 时 ， 就 存在 引号 的 柑 套 问题 。 例 如 ， 在 下 面 的 代码 中 ， 就 通过 转 义 符 的 方式 
将 XHTML 的 双 引 号 “""” 进 行 了 转 义 ， 如 下 所 示 。 


var strHTML = "<div class=\"header\"></div>"; 


这 种 转 义 符 的 书写 方式 费时 费力 ， 且 很 容易 造成 混淆 ， 代 码 很 不 直观 。 因 此 ， 在 此 特 
别 推荐 强制 以 单 引号 “"” 的 方式 环绕 字符 串 ， 以 规避 滥用 转 义 符 的 麻烦 ， 提 高 代码 的 可 读 
性 。 上 面 的 代码 可 以 下 面 的 方式 书写 ， 如 下 所 示 。 


var strHTML = '<div class="header"></div>'; 


。 数字 

在 Javascript 中 ， 数 字 类 型 支持 32 位 的 整数 (-22+1 到 2” 1 范围 之 间 ) 或 64 位 的 浮 
点 数 (-24+1 到 29_1 范围 之 间 )。 其 中 32 位 的 整数 又 可 包含 由 其 值 推导 而 来 的 八进制 或 
十 六 进 制 同 值 整数 。 
在 表示 八进制 数字 时 需要 在 数字 前 添加 “0” 作 为 前 级， 在 表示 十 六 进 制 数 字 时 需要 
在 数字 前 添加 “0x” 作 为 前 级 。 典 型 的 数字 类 型 变量 有 0、65535、3.14、017、0xA92F 等 。 

需要 注意 的 是 ， 被 引号 环绕 的 数字 在 Javascript 脚本 语言 中 会 被 识别 为 字符 串 类 数据 ， 
而 非 数 字 类 型 的 数据 。 例 如 ， 字 符 串 '0'/、'3.14' 与 数字 0、3.14 是 完全 不 同 的 。 

在 下 面 的 代码 中 ， 就 声明 了 四 个 数字 类 型 的 变量 ， 第 一 个 是 整数 ， 第 二 个 是 浮 点 数 ， 
第 三 个 是 八进制 数字 ， 第 四 个 则 是 十 六 进 制 数 字 ， 如 下 所 示 。 
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Var intMyAge = 30 ; 
Var flMyHeight = 1.80 ; 
Var intOctal = 0167 ; 


var intHex = 0xff9a ; 


虽然 Javascript 内 置 了 八进制 数字 功能 ， 但 是 在 实际 开发 中 ， 由 于 八进制 数字 本 身 应 
用 极 少 ， 基 本 处 于 被 弃 用 状态 ， 因 此 请 尽量 避免 使 用 八进制 的 数字 ， 以 防 出 现 混 淆 或 数据 
转换 困难 。 

在 处 理 或 者 存储 一 些 非常 大 或 非常 小 的 浮 点 数字 时 ,Javascript 支持 以 科学 记 数 法 的 方 
式 书写 数字 。 例 如 在 化 学 上 标准 摩尔 单位 分 子 量 为 6.02X 10”， 在 Javascript 中 的 表示 方法 
为 6.02e23 或 6.02E23, 而 53X102 这 类 极 小 的 科学 记 数 法 表示 的 数字 , 在 Javascript 中 的 
表示 方法 为 $.3-e10 或 5.3-E10。Javascript 会 自动 将 具有 六 个 或 六 个 以 上 前 导 0 的 浮 点 数 以 
科学 记 数 法 来 表示 。 

除了 各 种 数字 外 ，Javascript 还 把 一 些 基于 Number 对 象 的 常量 视 为 数字 型 数据 ， 其 主 
要 包括 以 下 几 种 ， 如 表 4-3 所 示 。 


表 4-3 Javascript 的 几 种 数字 类 型 常量 


常量 名 书写 值 作用 
NumberMAX_VALUE 1.7976931348623157e+308 ”Javascript 支持 的 最 大 数字 
NumberMIN_ VALUE Se-324 Javascript 支持 的 最 小 数字 

转换 为 数字 类 型 变量 时 如 为 非 数 字 值 时 
Number.NaN NaN 返回 此 值 
Number.NEGATIVE INFINITY < -Infinity 负 无 穷 大 ， 溢 出 时 返回 此 值 
Number.POSITIVE INFINITY < Infinity 正光 穷 大 ， 溢 出 时 返回 此 值 


需要 注意 的 是 ， 勿 将 以 上 五 个 数字 类 型 常量 用 于 数学 计算 ， 否 则 很 容易 返回 错误 的 
结果 。 

。 布尔 

布尔 类 型 的 数据 主要 用 于 逻辑 判断 ， 其 值 只 有 两 种 ， 即 true 和 false， 分 别 用 于 表示 届 
辑 真 和 风 辑 假 。 布 尔 类 型 的 数据 同样 不 需要 用 单 引 号 “"” 或 双 引 号 “"" ”环绕 ，Javascript 
可 以 自动 将 true 或 false 识别 为 布尔 类 型 的 数据 而 非 字 符 串 类 型 数据 。 在 下 面 的 代码 中 , 就 
定义 了 一 个 简单 的 布尔 值 数据 。 


Var blLoopTag = false ; 


e。 Null 

Null 是 一 个 特殊 的 数据 类 型 ， 其 值 只 有 一 种 ， 即 null。Null 类 型 的 数据 用 于 初始 化 一 
个 可 能 被 赋值 为 对 象 的 变量 ， 或 与 一 个 已 经 初始 化 的 变量 进行 比较 。 另 外 ， 当 函数 的 参数 
或 返回 值 的 期 望 值 是 对 象 时 ， 可 以 将 Null 类 型 的 数据 作为 参数 或 返回 值 传 入 或 传 出 。 

Null 类 型 的 数据 最 大 的 意义 是 作为 对 象 的 占 位 符 ， 因 此 不 应 将 其 与 空 字符 串 、 布 尔 值 
false、 数 字 0 或 Undefined 类 数据 混淆 。 关 于 对 象 的 相关 知识 ， 请 参考 本 书 第 $ 章 

® Undefined 

Undefined 类 型 的 数据 与 Null 类 似 , 也 只 有 一 种 值 ， 即 undefined。Undefined 类 型 的 数 
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据 表 现 为 未 初始 化 或 未 声明 的 变量 的 默认 值 。 

需要 注意 的 是 ， 未 初始 化 的 变量 和 未 声明 的 变量 在 Javascript 脚本 中 的 意义 是 完全 不 
同 的 ， 因 此 ， 虽 然 其 值 都 是 undefined， 但 是 对 其 运算 的 结果 可 能 完全 不 同 。 因 此 在 实际 开 
发 中 为 提高 程序 的 维护 性 能 和 规避 一 些 特殊 的 脚本 陷阱 ， 不 要 轻易 使 用 Undefined 数据 与 
其 他 数据 相 比 较 。 


2， 引 用 数据 类 型 

除了 原始 数据 类 型 外 ，Javascript 还 提供 了 引用 数据 类 型 ， 这 些 数据 类 型 本 身 实际 上 是 
一 些 特 殊 的 系统 原生 类 ， 所 有 这 些 类 型 的 数据 都 是 由 系统 原生 类 引用 而 来 的 实例 。 

。 对 象 


对 象 是 一 种 特殊 的 引用 数据 类 型 ， 其 作用 是 描述 一 个 抽象 的 概念 ， 并 将 若干 该 概念 下 
的 状态 封装 起 来 作为 一 个 整体 进行 处 理 和 调用 。Javascript 的 对 象 类 引用 数据 类 型 属于 原型 
对 象 ， 是 所 有 Javascript 引用 数据 类 型 的 构建 基础 。 定 义 一 个 Javascript 对 象 ， 其 方法 如 下 
所 示 。 

var objTest = new Object ( ); 

。 数组 

数组 也 是 一 种 特殊 的 引用 数据 类 型 ， 其 作用 是 将 若干 个 数据 以 对 等 的 关系 按照 指定 的 
序列 存储 起 来 ， 并 提供 若干 方法 和 属性 为 开发 者 访问 和 操作 这 些 数据 提供 接口 。 建 立 了 一 
个 简单 的 数组 ， 代 码 如 下 所 示 。 

Var arrWorkGroupMembers = [ ' 张 三 ' ，' 李 四 ' ， ' 王 五 ' ，' 赵 六 ' ] ， 

。 日 期 

日 期 类 数据 是 Javascript 对 象 的 一 个 子 集 ， 其 作用 是 存储 一 些 关 于 时 间 的 信息 ， 并 提 
供 各 种 方法 帮助 开发 者 读 取 和 操作 这 些 信息 。 在 下 面 的 代码 中 ， 就 简单 地 创建 了 一 个 基于 
当前 时 间 的 日 期 类 数据 。 

var dtNow = new Date ( ) : 

。 正则 表达 式 

正则 表达 式 数据 是 由 字符 串 衍 生 而 来 的 一 种 特殊 的 数据 ， 其 作用 是 提供 由 各 种 特殊 字 
符 以 特殊 的 语法 组 成 的 规则 ， 帮 助 开 发 者 对 字符 串 数 据 进 行 匹配 和 检测 。 正 则 表达 式 的 使 
用 方法 非常 复杂 ， 在 Javascript 脚本 语言 中 ， 所 有 正则 表达 式 的 规则 是 字符 串 必须 由 反 斜 
杠 “/” 环 绕 。 在 下 面 的 代码 中 ， 就 定义 了 一 个 简单 的 正则 表达 式 ， 用 于 验证 任意 数字 。 

Var reNumber = /(-?\d+) (\.\d+)?$/ ; 


引用 数据 类 型 的 各 种 对 象 往往 具有 更 多 复杂 的 属性 和 方法 ， 因 此 如 需 了 解 这 部 分 知 
识 ， 请 参考 本 书 第 5 章 。 


3. 数据 的 显 式 声 明 
虽然 Javascript 脚本 语言 支持 对 原始 数据 类 型 的 分 类 ， 但 是 其 并 不 支持 在 创建 和 生命 
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数据 时 以 显 式 地 方式 定义 数据 的 类 型 ， 这 点 与 其 同 源 自 ECMAScript 脚本 语言 的 
ActionScript 语言 有 着 明显 的 区 别 。 

这 种 方式 的 优越 性 在 于 可 以 更 加 灵活 地 操作 数据 ， 缺 陷 则 是 在 绝 大 多 数 场合 混乱 使 用 
数据 非常 容易 造成 数据 的 处 理 错误 。 因 此 在 实际 开发 中 ， 通 常情 况 下 建议 开发 者 在 声明 变 
量 时 尽量 为 数据 赋予 一 个 初始 值 ， 强 制 地 对 其 显 式 定义 类 型 。 例 如 ， 在 下 面 的 代码 中 ， 就 
分 别 定义 了 四 个 变量 ， 并 强制 显 式 为 其 定义 了 初始 数据 类 型 ， 如 下 所 示 。 

var strTestString = "" 

var intTestNumber = 0 ; 

Var flTestFloatNumber = 0.0 : 

Var blTestBoolean = false ; 


显 式 定义 以 上 数据 的 方法 就 是 为 其 赋予 一 个 已 定数 据 类 型 的 默认 值 ， 在 开发 中 使 用 这 
种 方法 可 以 更 加 规范 地 操作 数据 ， 使 程序 代码 的 安全 性 大 为 提升 。 同 样 ， 在 定义 复合 数据 
类 型 时 也 可 以 使 用 以 上 的 方法 。 例 如 ， 在 下 面 的 代码 中 就 分 别 定义 了 四 个 复合 数据 类 型 ， 
分 别 是 对 象 、 数 组 、 日 期 和 正则 表达 式 ， 如 下 所 示 。 


var objTestObject = null ; 

Var arrTestArray = [] ; 

var dtTestDate = new Date ( ) : 
Var reTestRegExp = \^[\w\W]n*$\ ; 


4. 原始 数据 的 转换 


在 显 式 地 声明 数据 后 ， 开 发 者 仍然 可 以 通过 一 些 简单 的 方法 对 数据 的 类 型 进行 转换 ， 
例如 将 任意 数据 类 型 转换 为 字符 串 、 整 数 、 浮 点 数 、 布 尔 值 或 正则 表达 式 等 。 

。 转换 为 字符 串 

Javascript 脚本 语言 为 绝 大 多 数 数据 类 型 都 提供 了 toString0 方 法 , 用 于 将 这 些 类 型 的 数 
据 转换 为 字符 串 ， 其 包括 数字 、 布 尔 值 、 对 象 、 数 组 、 日 期 和 正则 表达 式 等 。 在 下 面 的 代 
码 中 ， 就 分 别 创建 了 七 个 字符 串 类 型 的 变量 ， 并 将 之 前 创建 的 数据 以 toString0 方 法 转换 为 
字符 串 ， 然 后 再 进行 赋值 操作 ， 如 下 所 示 。 

Var strTestNumber = intTestNumber.toString ( ) ; 

Var strTestFloatNumber = flTestFloatNumber.toString ( ); 

Var strTestBoolean = blTestBoolean.toString ( ); 

Var strTestObject = objTestObject.toString ( ); 

var strTestArray = arrTestArray.tostring ( ) ; 

Var strTestDate = dtTestDate.toString ( ); 

Var strTestRegExp = reTestRegExp.toSstring ( ) ; 


在 将 浮 点 数字 转换 为 字符 串 类 型 数据 时 需要 注意 的 是 , 如 果 浮 点 数字 的 小 数 部 分 为 0， 
则 Javascript 会 先 将 其 转换 为 整数 ， 然 后 再 转换 其 为 浮 点 数 。 例 如 ， 浮 点 数 3.00 转换 为 字 
符 串 后 结果 会 是 字符 串 '3'。 
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。 转换 为 整数 

Javascript 脚本 语言 提供 了 parseInt0 全 局 函数 ， 用 于 将 字符 串 、 浮 点 数 转换 为 整数 。 需 
要 注意 的 是 使 用 parseInt0 函 数 转 换 的 字符 串 的 起 始 字 符 必 须 是 数字 ,转换 的 结果 将 为 字符 
串 起 始 若干 连续 的 数字 。 如 果 要 转换 的 字符 串 起 始 字符 不 是 数字 或 要 转换 的 数据 类 型 不 是 
字符 串 和 浮 点 数 ， 则 parseIntO 函 数 将 返回 NaN。 

在 下 面 的 代码 中 就 列举 了 几 种 通过 parseInt() 函 数 转 换 数据 的 方法 以 及 对 应 的 转换 
结果 。 


"S6533. } 8 // 输 出 结果 为 数字 36533 
"65535 个 字 节 ”) ); // 输 出 结果 为 数字 65535 
"ECMRScript3.57' ) ); // 输 出 结果 为 数字 NaN 
"3 1415926° Y Ys // 输 出 结果 为 数字 3 


parseInt0 函 数 除 了 可 以 将 字符 串 、 浮 点 数字 转换 为 整数 外 ， 还 可 以 将 不 同 进 制 的 整数 
转换 为 十 进 制 数 字 ， 此 时 需要 使 用 到 该 函数 的 第 二 个 参数 ， 即 进 制 参数 ， 其 使 用 方法 如 下 
所 示 。 


parseInt ( Number , Bit ) ; 


在 上 面 的 伪 代 码 中 ，Number 关键 字 表 示 要 转换 的 数字 必须 是 整数 ， 可 以 是 八进制 、 
十 进 制 或 十 六 进 制 ，Bit 关键 字 表 示 要 转换 的 数字 的 进 制 ， 其 值 可 以 是 2、8、10 或 16。 在 
下 面 的 代码 中 ， 就 分 别 将 二 进 制 、 八 进 制 和 十 六 进 制 的 三 个 数字 转换 为 了 十 进 制 数 字 ， 如 
下 所 示 。 

console.log ( parseInt ( '01011' ，2 ) ); // 输 出 结果 为 数字 11 


console.log ( parseInt ( '0375' , 8 ) ); // 输 出 结果 为 数字 253 
console.log ( parseInt ( '0xffcc' ，16 ) ); // 输 出 结果 为 数字 65484 


。 转换 为 浮 点 数 

转换 浮 点 数 的 方法 与 转换 整数 类 似 , Javascript 脚本 语言 提供 了 parseFloat0 全 局 函数 实 
现 将 字符 串 转换 为 整数 的 功能 , 其 执行 的 原理 与 parseInt0 函 数 基本 相同 , 在 下 面 的 代码 中 ， 
就 通过 parseFloat0 函 数 对 一 些 数据 进行 了 转换 操作 ， 将 其 转换 为 整数 ， 如 下 所 示 。 


console.log ( parseInt 
console.log ( ParseInt 
console.log ( parseInt 


console.log ( parseInt 


console.log ( parseFloat ( '11892Flight' ) ); // 输 出 结果 为 数字 11892 
console.log ( parseFloat ( '3.14' ) ); // 输 出 结果 为 数字 3 .14 
console.log ( parseFloat ( '11.22.33' ); // 输 出 结果 为 数字 11 .22 
console.log ( parseFloat ( '001122' ); // 输 出 结果 为 数字 1122 
console.log ( parseFloat ( '1023' ); // 输 出 结果 为 数字 1023 


在 使 用 parseFloatO 函 数 时 需要 注意 ， 该 函数 不 支持 八进制 或 十 六 进 制 的 数字 转换 ， 也 
不 支持 进 制 参数 ， 因 此 当 被 转换 的 数值 为 八进制 数字 时 ， 将 被 直接 作为 十 进 制 整数 处 理 ， 
而 当 被 转换 的 数值 为 十 六 进 制 数字 时 ， 该 函数 只 能 识别 数字 0。 


5， 强制 数据 转换 
除了 原始 数据 的 显 式 转换 外 ，Javascript 还 支持 强制 数据 转换 ， 其 作用 是 通过 更 加 复 


汉 
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的 逻辑 处 理 数 据 的 类 型 。 其 提供 了 三 种 类 型 的 强制 数据 转换 函数 Sting0、Number0 和 
Boolean0， 分 别 用 于 将 任意 类 型 的 数据 转换 为 字符 串 、 数 字 或 布尔 值 。 

。 强制 转换 为 字符 串 

String0 全 局 函数 的 作用 是 强制 将 任意 类 型 的 数据 转换 为 字符 串 。 相 比 toString0 方 法 ， 
String(0) 函 数 更 加 强力 。 例 如 ，toString0 方 法 无 法 处 理 Null 或 Undefined 类 型 的 数据 ， 在 转 
换 这 两 种 数据 时 会 报错 ， 但 是 String0 函 数 则 可 以 直接 将 这 两 种 数据 转换 为 实际 的 字符 串 ， 
如 下 所 示 。 


console.log ( String ( null ) ); // 输 出 结果 为 字符 串 'null' 
console.log ( String ( undefined ) ); // 输 出 结果 为 字符 串 'undefined" 


。 强制 转换 为 数字 

Number(O 全 局 函数 的 作用 是 强制 将 任意 类 型 的 数据 转换 为 数字 ， 包 括 整数 和 浮 点 数 。 
其 与 parseInt0 函 数 和 parseFloat() 函 数 的 区 别 在 于 ，parseInt0 函 数 和 parseFloat0) 函 数 在 转换 
布尔 值 、Null 值 或 Undefined 值 时 会 返回 NaN， 在 转换 以 数字 开头 的 字符 串 时 能 识别 第 一 


个 无 效 字符 之 前 的 部 分 数字 ;而 Number0 函 数 在 处 理 布尔 值 时 ， 会 将 true 转换 为 数字 1， 
false 转换 为 数字 2，Null 值 转换 为 0， 另 外， 只 要 字符 串 中 包含 无 效 字符 ， 则 Number() 函 
数 就 会 返回 NaN， 如 下 所 示 。 

console.log ( Number ( false ) ) ; // 输 出 结果 为 数字 0 

console.log ( Number ( true ) ) ; // 输 出 结果 为 数字 1 

console.log ( Number ( 'false' ) ); // 输 出 结果 为 NaN 

console.log ( Number ( 'true' ) ) ; // 输 出 结果 为 NaN 

console.log ( Number ( undefined ) ) ; // 输 出 结果 为 NaN 

console.log ( Number ( null ) ) ; // 输 出 结果 为 数字 0 

console.log ( Number ( '3.14' ) ) ; // 输 出 结果 为 数字 3.14 

console.log ( Number ( '11892' ) ) ; // 输 出 结果 为 数字 11892 

console.log ( Number ( '2013.10.01' ) ); // 输 出 结果 为 NaN 

console.log ( Number ( '360buy' ) ) ; // 输 出 结果 为 NaN 


如 果 被 转换 的 数据 可 以 被 完整 地 转换 ,那么 NumberO 函 数 将 自动 判断 将 结果 转换 为 整 

。 强制 转换 为 布尔 值 

Boolean0 全 局 函数 用 于 将 任意 类 型 的 数据 转换 为 布尔 值 。 在 进行 转换 时 ， 其 会 对 几 种 
原始 数据 类 型 的 数据 的 值 进行 判断 ， 通 过 逻辑 判定 决定 转换 的 结果 ， 然 后 再 进行 转换 ， 其 
转换 的 方式 如 表 4-4 所 示 


表 4-4 Boolean0 函 数 转换 值 的 方式 


数据 类 型 ” 结果 

String 当 字 符 串 为 空 时 为 false， 否 则 为 true 

Number 当 数 字 为 +0、-0、0、NaN 时 为 false， 否 则 为 true 
Null false 


Undefined false 
Object 当 其 值 不 为 null 时 为 tue， 否 则 为 false 
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数据 类 型 ” ”结果 
Array 当 其 值 不 为 null 时 为 tue， 否 则 为 false 
Date 当 其 值 不 为 null 时 为 tve， 否 则 为 false 


RegExp 当 其 值 不 为 null 时 为 true， 否则 为 false 


4.3.3 ”数据 的 运算 


计算 机 软件 程序 最 基本 也 是 最 重要 的 功能 就 是 对 数据 进行 运算 ， 获 取 运 算 结果 。 这 种 
所 谓 的 “运算 ”并 不 局 限于 数学 中 的 加 减 乘除 等 基本 和 运算， 还 包含 一 些 带 有 计算 机 特色 的 

Javascript 的 运算 是 通过 特定 的 表达 式 和 运算 符 实现 的 ， 根 据 参与 运算 的 表达 式 数量 ， 
可 以 将 运算 分 为 一 元 运算 、 二 元 运算 和 三 元 运算 ， 对 应 的 运算 符 即 一 元 运算 符 、 二 元 运算 
符 和 三 元 运算 符 。 常 见 的 运算 种 类 包含 数学 运算 、 关 系 运算 、 赋 值 运算 、 位 运算 、 四 辑 运 
算 和 其 他 运算 等 几 种 。 

1. 数学 运算 

数学 运算 是 最 基本 的 数据 运算 方式 ， 其 作用 是 对 整数 和 浮 点 数 等 两 类 数据 进行 基本 的 
四 则 运算 和 其 他 衍生 的 运算 。 数 学 运算 支持 以 下 几 种 运算 符 ， 如 表 4-5 所 示 。 

表 4-5 数学 运算 的 运算 符 


运算 符 ”名称 ”作用 示例 

十 求 和 求 两 侧 数字 之 和 console.log (1+2) ; /输出 数字 3 

求 站 求 两 侧 数字 之 差 consolelog ( 22 一 7 ) ; /输出 数字 15 
求 积 求 两 侧 数 字 之 积 console.log (3 * 5 ) ; /输出 数字 15 

/ 求 商 求 左 侧 数 字 除 以 右 侧 数字 之 商 consolelog (14717 ) : /输出 数字 2 

% 求 余 求 左 侧 数 字 整 除 右 侧 数字 之 余数 console.log ( 18 /4 ) ; /输出 数字 2 


数学 运算 必须 由 两 个 数字 (可 以 是 整 型 或 浮 点 型 )》 进 行 ， 因 此 所 有 的 数学 运算 都 属于 
二 元 运算 ， 其 所 得 的 结果 也 只 能 是 整 型 或 浮 点 型 的 数字 。 
2. 关系 运算 
关系 运算 的 作用 是 对 两 个 数据 进行 比较 ， 获 取 比 较 的 逻辑 真 假 〈 布 尔 值 数据 )。 在 此 
需要 注意 的 是 ， 关 系 运算 与 数学 运算 的 区 别 在 于 关系 运算 所 能 使 用 的 数据 类 型 众多 ， 通 常 
情况 下 绝 大 多 数 数据 类 型 都 能 使 用 关系 运算 。 常 用 的 关系 运算 符 如 表 4-6 所 示 。 
表 4-6 关系 运算 的 运算 符 


运算 符 ”名称 ”作用 可 用 数据 类 型 ” 示例 

一 相等 ”判断 两 数据 是 否 所 有 数据 类 型 ”console.log (3 一 5 );// 输 出 false 
相等 console.log (‘aa’ 一 “aa ) ; /输出 true 

二 不 等 ”判断 两 数据 是 否 不 ”所 有 数据 类 型 ”consolelog (3 !=5 ) ; /输出 true 


相等 console.log (“aa’ != “aa’ ) ; // 输 出 false 
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续 表 
运算 符 ”名 称 ”作用 可 用 数据 类 型 ” 示例 
一 一 全 等 ”判断 两 数据 是 否 在 ”所 有 数据 类 型 ” console.log (null = 一 null) ; /输出 tme 
相等 的 同时 数据 类 console.log ( null 一 undefined ); // 输 出 false 
型 也 相同 
! 一 不 全 ”判断 两 数据 是 否 无 ”所 有 数据 类 型 。” console.log (null ! 一 null) ; /输出 false 
等 论 值 和 类 型 都 相同 consolelog (null ! 一 undefined ) ; /输出 true 
> 大 于 “判断 是 否 第 一 个 数 “数字 consolelog ( 1 > 2 ) : // 输 出 false 
据 大 于 第 二 个 数据 console.log (3 >2):;// 输 出 true 
小 于 ”判断 是 否 第 一 个 数 ”数字 console.log ( 1 <2);// 输 出 true 
据 小 于 第 二 个 数据 console.log (3 <2);// 输 出 false 
5 大 于 ”判断 是 否 第 一 个 数 ”数字 consolelog (1 >= 2 ) ; // 输 出 false 
等 于 ” 据 大 于 或 等 于 第 二 console.log (2 >= 2 ) ; /输出 true 
个 数据 
< 一 小 于 “判断 是 否 第 一 个 数 ”数字 consolelog (1 <=2 );// 输 出 true 
等 于 ” 据 小 于 或 等 于 第 二 console.log (2 <= 2 );// 输 出 false 
个 数据 


所 有 的 关系 运算 都 需要 由 两 个 操作 表达 式 进 行 ， 因 此 这 些 运算 也 都 是 二 元 运算 。 在 使 
用 关系 运算 符 时 尤其 需要 注意 的 是 ，Javascript 具有 强 类 型 转换 机 制 ， 因 此 在 判断 两 个 数据 
是 否 相 等 时 《使 用 相等 运算 符 或 不 等 运算 符 )， 如 果 被 比较 的 两 个 数据 类 型 不 一 致 ， 则 
Javascript 会 强制 对 数据 进行 数据 转换 ， 将 其 转换 为 相同 的 类 型 后 再 进行 比较 。 

例如 , 在 语法 上 字符 串 3.14' 和 浮 点 数 3.14 是 完全 不 同 的 两 个 值 , 但 是 在 使 用 相等 运算 
符 或 不 等 运算 符 比较 这 两 个 值 时 ，Javascript 会 视 其 为 相等 ， 如 下 所 示 。 

console.log ( '3.14' == 3.14 ) ; // 输 出 true 

console.log ( '3.14' == 3.14 );，; // 输 出 false 


如 果 在 开发 过 程 中 忽视 了 以 上 情况 ， 则 很 容易 造成 BUG。 这 种 强制 数据 转换 的 机 制 是 
当 数 字 和 字符 串 相 比较 时 ， 字 符 串 会 首先 转换 为 数字 ， 然 后 再 进行 比较 。 如 果 一 个 布尔 值 
和 数字 比较 ， 则 布尔 值 也 会 首先 被 转换 为 数字 ， 其 中 true 被 转换 为 1，false 被 转换 为 0， 
然后 再 比较 ， 如 下 所 示 。 


console.log ( true == 1 ) ; // 输 出 true 
console.log ( false == 0 ) ; // 输 出 true 


如 果 一 个 值 是 对 象 而 另 一 个 不 是 ， 则 Javascript 会 先 尝试 调用 对 象 的 valueOf0 方 法 得 
到 原始 类 型 值 ， 如 果 对 象 没有 定义 valueOf0 方 法 ， 则 会 调用 toString0 将 对 象 转换 为 字符 串 
再 用 之 前 的 强制 转换 逻辑 进行 比较 。 

在 相等 运算 符 和 不 等 运算 符 的 比较 表达 式 中 ，null 和 undefined、 空 字符 串 和 数字 0 也 
被 视 为 是 相等 的 值 ， 如 下 所 示 。 


console.log ( null == undefined ); // 输 出 true 
console.log ('' ==0) ， // 输 出 true 


由 于 相等 运算 符 和 不 等 运算 符 在 比较 上 的 逻辑 复杂 性 和 易 误 解 性 ， 在 实际 开发 中 ， 除 
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非 需要 将 某 个 值 与 mull 比较 ， 否 则 请 尽量 避免 使 用 相等 运算 符 和 不 等 运算 符 。 在 进行 两 个 
值 比较 时 ， 更 推荐 采用 全 等 运算 符 和 不 全 等 运算 符 ， 这 两 个 运算 符 在 比较 数据 时 不 仅 能 够 
比较 数据 的 值 ， 还 能 同时 比较 数据 的 类 型 ， 更 符合 绝 大 多 数 情 况 下 相等 的 逻辑 意义 。 

3. 逻辑 运算 

多 缉 运算 的 原理 是 根据 逻辑 真 、 逻 辑 假 和 逻辑 非 三 种 基于 自然 迎 辑 的 运算 方式 进行 运 
算 ， 其 主要 应 用 于 各 种 逻辑 判断 ， 如 下 所 示 。 

。 逻辑 与 

多 缉 与 运算 所 使 用 的 运算 符 为 “&&”。 在 迎 辑 与 运算 中 ， 只 有 两 个 表达 式 均 为 真 时 ， 
结果 才 为 真 。 当 两 个 表达 式 为 一 真一 假 时 ， 结 果 为 假 。 当 两 个 表达 式 均 为 假 时 ， 结 果 仍然 
为 假 。 两 个 表达 式 的 逻辑 与 运算 结果 如 表 4-7 所 示 。 

表 4-7 ”两 个 表达 式 的 逻辑 与 运算 结果 

第 一 个 表达 式 ”第 二 个 表达 式 结果 示例 


true true true consolelog ( true && true ) ; // 输 出 true 
true false false console.log ( true && false ) ; // 输 出 false 
false true false console.log ( false && true ) ; // 输 出 false 
false false false console.log ( false && false ) ; // 输 出 false 


逻辑 与 运算 是 典型 的 二 元 运算 ， 因 此 在 使 用 该 运算 时 需要 提供 两 个 基于 运算 的 表达 
式 。 在 实际 的 开发 中 ， 请 尽量 保持 两 个 表达 式 都 是 布尔 值 ， 否 则 很 容易 会 因为 Javascript 
的 简便 计算 模式 导致 运算 结果 与 预期 结果 不 一 致 。 

。 届 辑 或 

逻辑 或 运算 所 使 用 的 运算 符 是 “|"。 在 罗 辑 或 运算 中 ， 只 有 当 两 个 表达 式 均 为 假 时 ， 
结果 才 为 假 ， 只 要 有 一 个 表达 式 为 真 ， 则 结果 必然 是 真 。 两 个 表达 式 的 逻辑 或 运算 结果 如 
表 4-8 所 示 。 

表 4-8 ”两 个 表达 式 的 逻辑 或 运算 结果 

第 一 个 表达 式 。 第 二 个 表达 式 。 结果 示例 


true true true consolelog ( true || true ) ; // 输 出 true 
true false true console.log ( true || false ) ; // 输 出 true 
false true true console.log ( false || true ) ; /输出 true 
false false false console.log ( false || false ) ; /输出 false 


逻辑 或 运算 也 是 二 元 运算 ， 其 与 逻辑 与 运算 类 似 ， 都 需要 提供 两 个 运算 表达 式 。 在 实 
际 的 开发 中 ， 同 样 应 尽量 保障 两 个 表达 式 都 是 布尔 值 ， 否 则 很 容易 出 现 错误 。 

。 逻辑 非 

逻辑 非 运算 所 使 用 的 运算 符 是 “!”， 其 属于 典型 的 一 元 运算 ， 即 只 需要 一 个 运算 表达 
式 即 可 完成 的 运算 。 在 逻辑 非 运算 中 ， 如 果 运 算 的 表达 式 是 真 ， 则 结果 为 假 ， 否 则 ， 结 果 
为 真 。 


4. 赋值 运算 
赋值 运算 的 作用 是 为 某 个 对 象 或 变量 指定 一 个 值 ， 或 在 对 某 个 变量 的 值 进行 运算 后 ， 
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将 获得 的 结果 值 赋予 原 变量 。 赋 值 运 算是 最 基本 的 变量 运算 ， 声 明 变量 等 操作 都 需要 使 用 
到 赋值 运算 。 常 用 的 赋值 运算 需要 使 用 以 下 几 种 赋值 运算 符 ， 如 表 4-9 所 示 。 
表 4-9 赋值 运算 的 运算 符 


运算 符 ” 名 称 作用 示例 
= 基本 赋值 将 值 赋予 指定 的 变量 var blTag = false ; 
console.log (blTag ) ; // 输 出 false 
4= 加 法 赋值 先 对 变量 进行 求 和 运算 , 再 将 所 var intCount= 5 ; 
得 结果 赋予 原 变 量 intCount += 2 
console.log ( intCount ) ; // 输 出 7 
一 = 减法 赋值 先 对 变量 进行 求 差 运算 , 再 将 所 ”var intCount = 3 ; 
得 结果 赋予 原 变量 intCount —=1:; 
console.log ( intCount ) ; /输出 2 
a 乘法 赋值 先 对 变量 进行 求 积 运算 , 再 将 所 var intCount= 6 ; 
得 结果 赋予 原 变 量 intCount *= 3 ; 
consolelog (intCount ) ; /输出 18 
三 除法 赋值 。”” 先 对 变量 进行 求 商 运算 , 青 将 所 ”var intCount = 24 ; 
得 结果 赋予 原 变量 intCount /= 4 : 
console.log (intCount ) ; /输出 6 
%= 求 余 赋值 。” 先 对 变量 进行 求 余 运算 , 再 将 所 ”var intCount = 19 ; 
得 结果 赋予 原 变量 intCoutn %= 4 ; 
console.log ( intCount ) ; /输出 3 
二 营 加 在 原 变量 值 基础 上 加 1， 再 将 所 var intCount= 5 : 
得 结果 赋予 原 变量 intCount ++ ; 
console.log (intCount ) ; /输出 6 
三 三 累 减 在 原 变量 值 基础 上 减 1， 再 将 所 var intCount= 9 ; 
得 结果 赋予 原 变量 intCount ——; 
consolelog ( intCount ) ; /输出 8 


赋值 运算 中 ， 有 登 加 和 累 减 两 种 运算 属于 一 元 运算 ， 其 他 赋值 运算 属于 二 元 运算 ， 除 基 
本 赋值 运算 可 以 由 任意 类 型 的 变量 使 用 外 ， 其 他 几 种 运算 仅 能 在 数字 中 使 用 。 


5 按 位 运算 


按 位 运算 的 原理 是 将 普通 整数 〈 十 进 制 、 十 六 进 制 ) 转换 为 二 进 制 数字 ， 然 后 再 进行 
运算 。 按 位 运算 又 可 分 为 按 位 逻辑 运算 和 按 位 位 移 运算 两 种 。 
其 中 , 按 位 逻辑 运算 会 将 每 一 位 数位 上 的 0 视 为 逻辑 假 (false)，1 视 为 逻辑 真 (true)， 
然后 青 进行 逻辑 运算 操作 。 按 位 位 移 运 算 则 主要 会 根据 第 二 个 操作 数字 将 第 一 个 以 指定 
的 方向 移动 ， 然 后 得 出 新 的 位 移 后 的 数字 结果 。Javascript 支持 七 种 按 位 运算 ， 如 表 4-10 


所 示 。 


运算 方式 
按 位 与 


运算 符 


表 4-10 按 位 运算 的 类 型 


说 明 


二 元 按 位 逻辑 运算 , 对 两 个 二 进 制 数字 的 每 一 位 进行 逻辑 与 运算 , 获取 


结果 
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续 表 

运算 方式 运算 符 说 明 

按 位 或 | 二 元 按 位 逻辑 运算 ,对 两 个 二 进 制 数字 的 每 一 位 进行 逻辑 或 运算 , 获取 
结果 

按 位 异 或 ^ 二 元 按 位 逻辑 运算 , 对 两 个 二 进 制 数字 的 每 一 位 进行 逻辑 或 运算 , 获取 


结果 , 其 与 按 位 或 运算 的 区 别 在 于 , 当 两 个 数字 的 同一 数位 数据 如 果 都 
是 1， 则 运算 结果 为 0 


按 位 非 ~ -元 按 位 逻辑 运算 ， 对 二 进 制 数字 每 一 位 进行 逻辑 非 运 算 ， 获 取 结 果 

按 位 左 移 << 二 元 按 位 位 移 运算 , 在 保留 二 进 制 数 字符 号 的 情况 下 对 其 所 有 数位 向 左 
(高 位 》 移 动 指定 的 位 数 ， 右 侧 新 增 的 数位 填补 为 0， 获取 结果 

按 位 右 移 > 二 元 按 位 位 移 运 算 , 在 保留 二 进 制 数字 符号 的 情况 下 对 其 所 有 数位 向 右 
〈 低 位 ) 移动 指定 的 位 数 ， 左 侧 新 增 的 数位 填补 为 0， 获取 结果 

无 符号 按 位 右 移 >>> 二 元 按 位 位 移 运算 , 在 不 保留 二 进 制 数字 符号 的 情况 下 对 齐 所 有 数位 向 


右 〈 低 位 ) 移动 指定 的 位 数 ， 左 侧 新 增 的 数位 填补 为 0， 获取 结果 


6. 条 件 运 算 


条 件 运算 是 Javascript 中 唯一 一 种 三 元 运算 ， 其 原理 是 对 一 个 表达 式 进行 逻辑 判断 ， 
根据 逻辑 判断 的 结果 决定 采用 运算 中 哪 一 个 值 作为 整个 运算 的 结果 。 条 件 运 算 的 运算 符 为 
“3:” 其 使 用 方法 如 下 所 示 。 

Expression ? TrueValue : FalseValue 

在 上 面 的 伪 代 码 中 ，Expression 表示 判断 的 表达 式 ，TrueValue 表示 当 表 达 式 值 为 真 时 
运算 的 结果 ，FalseValue 表示 当 表达 式 值 为 假 时 运算 的 结果 。 例 如 ， 判 断 一 个 数字 是 否 大 
于 0， 如 果 是 ， 输 出 “该 数字 大 于 0”， 否则 输出 “该 数字 小 于 等 于 0”， 代码 如 下 。 

var intCount = 5， 

console.log( intCount > 0 ?' 该 数字 大 于 0' : ' 该 数字 小 于 等 于 0' ) ，; 

条 件 运算 通常 情况 下 可 以 代替 一 些 简 单 的 逻辑 分 支流 程 ， 简 化 代码 ， 减 少 代码 行 数 ， 
但 是 如 果 在 一 行 语句 内 大 量 运用 此 类 运算 ， 则 很 可 能 会 提高 代码 阅读 的 复杂 性 。 

7. 其 他 运算 

除了 之 前 介绍 的 6 种 运算 类 型 外 ，Javascript 还 提供 了 一 些 带 有 特殊 操作 性 质 的 运算 ， 
用 于 处 理 基 础 数据 和 对 象 , 改变 这 些 基 础 数据 和 对 象 之 间 的 优先 级 关系 等 , 如 表 4-11 所 示 。 


表 4-11 其 他 Javaseript 运算 


运算 类 型 符号 作用 示例 
删除 delete -元 运算 ， 将 某 个 实体 从 内 存 中 ”var objTest= null ; 
删除 delete objTest ; 
// 输 出 undefined 
console.log ( objTest.toString ) ; 
清除 定义 值 ”void -元 运算 ,将 任意 实体 转换 为 未 var intCount= 5 ; 
定义 值 undefined // 输 出 undefined 


console.log (void (intCount ) ) ; 
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运算 类 型 符号 作用 示例 
连接 字符 串 + 二 元 运算 ， 将 两 个 字符 串 连接 起 ”var strJava = 'Java' ; 
来 ， 返 回 一 个 新 的 字符 串 var strScript = 'script ; 
// 输 出 Javascript 
console.log ( strJava + strScript ) ; 
并 列 二 元 运算 ， 表现 若干 同类 实体 之 var intCount = 1 , strText='a'; 
间 并 列 的 关系 
建立 数组 0 -元 运算 ,将 其 内 含 的 数据 作为 ”var arrMatrix=[1,2,3]; 
元 素 ， 创 建 一 个 数组 var arEmpty =[]:; 
数组 索引 0 二 元 运算 ， 指 定数 组 元 素 的 指定 var arMatrix=[27,9,3,1]:; 
索引 序列 ， 求 得 数组 中 该 序列 位 ”console.log ( arrMatrix [2] ); // 输 出 9 
置 的 值 
访问 成 员 二 元 运算 ， 访问 对 象 、 类 的 指定 var objModel = null ; 
成 员 objModel.value =" ; 
检测 原始 typeof -元 运算 ,检测 某 个 变量 的 原始 ”var intCount = 69 ; 
类 型 数据 类 型 // 输出 Number 
console.log ( typeof intCount ); 
检测 引用 instanceof ”二 元 运算 , 检测 某 个 对 象 是 否 属 var objTest= new Object () ; 
类 型 于 一 个 引用 数据 类 型 // 输出 true 
console.log ( objTest instanceof Object) ; 
建立 实例 new -元 运算 ， 将 某 个 引用 类 型 实 var MyFunction = new Function () {)}; 
例 化 
建立 对 象 0 -元 运算 , 将 内 嵌 的 键 值 对 数据 ”var objTest= { 
转换 为 对 象 name : 'my name' ， 
age:15 
上 
传递 参数 0 -元 运算 ， 为 函数 和 方法 传递 isNaN ( 15 ); 
参数 
定义 成 员 值 二 元 运算 ， 为 对 象 和 类 定义 成 员 ”var objTest= { 
或 为 语句 添 的 值 ， 例 如 属性 值 、 方 法 等 。 除 name : my name' , 
加 标记 此 之 外 也 可 以 为 语句 添加 标记 ， age: 15 
以 供 其 他 语句 调用 }: 


Start : intCount ++ ; 


连接 字符 串 的 运算 符 “+” 在 书写 上 和 数学 运算 中 的 加 号 “+” 是 完全 一 样 的， 在 实际 
使 用 中 ，Javascript 会 自动 判断 该 运算 符 两 侧 的 数据 类 型 ， 当 且 仅 当 该 运算 符 两 侧 的 数据 都 
是 数字 时 ， 将 其 判断 为 数学 运算 的 加 号 “+”， 和 否则 将 会 强制 将 该 运算 符 两 侧 的 数据 转换 为 
字符 串 ， 然 后 进行 连接 。 
列 运算 符 “, ”是 一 种 应 用 广泛 的 内 联 分 隔 符 ， 其 不 仅 可 用 于 一 行 代码 中 同时 执行 
的 多 个 语句 ， 还 被 广泛 应 用 于 对 象 的 若干 成 员 、 数 组 的 若干 元 素 以 及 函数 的 若干 参数 等 之 
间作 为 分 隔 标 志 。 

建立 数组 和 数组 索引 的 运算 符 “ 口 ”书写 也 是 完全 一 致 的 。 其 区 别 在 于 ， 当 其 作为 一 
元 运算 符 时 ， 用 于 创建 或 表示 一 个 数组 ， 而 当 其 作为 一 个 二 元 运算 符 时 ， 则 其 左 侧 为 数组 


146 高 效 Web 前 端 开发 之 路 一 一 YUI 3.15 


的 名 称 ， 内 部 包 于 的 则 是 该 数组 指定 的 索引 。 

typeof 和 instanceof 两 种 运算 符 均 可 以 检测 数据 的 数据 类 型 ,但 其 作用 有 所 区 别 .typeof 
运算 符 仅 能 检测 字符 串 、 数 字 、 布 尔 值 和 undefined 四 种 原始 数据 类 型 ， 当 数据 为 其 他 类 型 
时 ，typeof 运算 符 只 能 返回 object， 如 下 所 示 。 


console.log ( typeof 'aaa' ) ; // 输 出 string 
console.log ( typeof 256 ) ; // 输 出 number 
console.log ( typeof 3.14 ) ; // 输 出 number 
console.log ( typeof true ) ; // 输 出 boolean 
console.log ( typeof undefined ) ; // 输 出 undefined 
console.log ( typeof null ) ; // 输 出 object 
console.1og ( typeof { value = 'a'} ); // 输 出 object 


如 果 需 要 识别 某 个 对 象 的 引用 类 型 ， 则 只 能 使 用 instanceof 运算 符 对 该 对 象 可 能 的 引 
用 类 型 进行 测试 ， 通 过 测试 结果 判定 该 对 象 的 原型 链 。 例 如 ， 在 对 一 个 日 期 类 对 象 以 
instanceof 运算 符 对 其 类 型 进行 匹配 时 ，Object 和 Date 两 个 原型 链 均 符合 其 引用 类 型 ， 如 
下 所 示 。 

Var dtNow = new Date ( ) :; 

console.log ( dtNow instanceof Object ) ; // 输 出 true 


console.log ( dtNow instanceof Date ) ; // 输 出 true 
console.log ( dtNow instanceof RegExp ) ; // 输 出 false 


4.3.4 运算 的 优先 级 


在 数学 中 ， 表 达 式 的 运算 并 非 总 是 遵循 自 左 至 右 的 顺序 ， 乘 法 和 除法 的 运算 优先 级 就 
要 比 加 法 和 减法 高 一 些 ， 乘 方 和 开 方 的 运算 优先 级 又 比 乘法 和 除法 高 一 些 。Javascript 的 运 
算 同 样 需 要 遵循 优先 级 ， 通 过 优先 级 来 控制 各 种 运算 的 执行 顺序 。 


1. 运算 符 的 分 级 


在 默认 的 状态 下 ， 如 果 表 达 式 中 的 运算 都 是 同类 运算 ， 则 Javascript 以 自 左 至 右 的 顺 
序 对 表达 式 进行 运算 。 但 是 当 一 个 Javascript 表达 式 包含 多 种 类 型 的 运算 时 ，Javascript 会 
对 这 些 运算 的 优先 顺序 进行 修正 ， 以 指定 的 优先 级 别 进行 运算 ， 此 时 ， 就 可 能 改变 运算 的 
顺序 ， 并 影响 运算 的 结果 。 通 常情 况 下 Javascript 将 运算 划分 了 若干 优先 级 ， 如 表 4-12 
所 示 。 


表 4-12 Javascript 运算 符 的 优先 级 
运算 符 〈 以 中 文 顿 号 “、” 分 隔 ) 优先 级 
0、 0 0、 .: 1 
1!、 ++、 一 一 、typeof、new、void、delete、instanceof » 
*、/、% 3 
4 
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续 表 

运算 符 ( 以 中 文 顿 号 “、” 分 隔 ) 优先 级 
Ce $ 
cs 6 
pe 7 
& 8 
的 9 
| 10 
KK 11 
1 12 
?2: 13 
= ey = We fe Ws 14 

15 


在 上 表 中 以 从 小 到 大 的 顺序 将 所 有 Javascript 脚本 语言 中 的 运算 符 划 分 为 了 15 个 等 
级 ,其 中 ,优先 级 数字 越 小 ， 表示 其 优先 级 越 高 。 当 表达 式 中 存在 多 个 优先 级 的 运算 符 时 ， 
Javascript 将 先 执行 优先 级 高 的 运算 符 ， 再 执行 优先 级 低 的 运算 符 。 如 果 当 若干 运算 符 都 处 


2. 优先 级 的 修正 


在 数学 中 ， 人 允许 使 用 小 括号 “0” 临 时 对 运算 的 优先 级 进行 修正 ， 提 升 某 些 运算 的 优 
先 级 。 例 如 ， 在 下 面 的 数学 公式 中 ， 就 将 先 计 算 优先 级 较 低 的 加 法 ， 再 计算 优先 级 较 高 的 
乘法 ， 如 下 所 示 。 

(35) XxX 9= 72 

在 Javascript 中 ， 同 样 支持 以 小 括号 “0” 的 方式 临时 修正 运算 符 的 优先 级 ， 提 高 局 部 
运算 的 级 别 。 例 如 ， 在 下 面 的 代码 中 ， 默 认 情况 下 Javascript 将 优先 进行 逻辑 非 运算 ， 再 
进行 逻辑 与 运算 ， 如 下 所 示 。 

console.log ( ! true && ! true ) ; // 输 出 false 

如 果 使 用 括号 “QO” 对 该 逻辑 运算 的 局 部 优先 级 进行 变更 ， 则 可 能 得 出 完全 相反 的 结 
果 ， 如 下 所 示 。 

console.log ( ! ( true && ! true ) ) ; // 输 出 true 

在 使 用 括号 “0” 修 正 运算 的 优先 级 时 ， 括 号 的 嵌 套 层级 越 高 〈 越 靠 内 )， 则 优先 级 越 
高 ， 嵌 套 层级 越 低 ( 越 靠 外 )， 则 优先 级 越 低 。 


4.4 代码 流程 控制 


编程 语言 的 作用 是 通过 一 行 行 的 语句 对 各 种 程序 数据 进行 处 理 和 运算 。Javascript 本 身 
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属于 逐 行 解析 语句 的 编程 语言 ， 在 一 些 特殊 需求 场合 下 ， 开 发 者 可 以 对 程序 语句 执行 的 流 
程 进行 控制 ， 提 高 程序 的 运算 效率 ， 使 程序 的 代码 更 加 简洁 而 精炼 。 


4.4.1 分 支流 程控 制 


在 程序 编写 中 ， 若 干 并 列 关系 的 语句 可 以 组 成 儿 个 分 支 。 分 支流 程控 制 ， 就 是 根据 指 
定 的 条 件 进 行 计 算 ， 以 计算 的 结果 判定 和 执行 指定 某 一 条 分 支 的 流程 控制 方式 。Javascript 
支持 四 种 类 型 的 分 支流 程 语句 ， 即 直 语 句 、if...else 语句 、if...else 直 语 句 和 switch...case 
语句 。 


1. 首 语句 


让 语句 是 最 简单 的 分 支流 程控 制 语句 ， 其 属于 单 分 支 的 流程 控制 语句 ， 作 用 是 根据 一 
个 条 件 表达 式 判 定 的 逻辑 结果 ， 决 定 其 包 庄 的 代码 块 是 否 允 许 被 执行 。 让 语句 的 代码 执行 
流程 如 图 4-3 所 示 。 

在 Javascript 脚本 语言 中 ， 让 语句 的 书写 和 使 用 方法 如 下 所 示 。 


if ( Condition ) { 


Statements ; 


} 


在 上 面 的 伪 代 码 中 ，Condition 关键 字 表示 直 语 句 的 执行 判断 条 件 ， 其 可 以 是 一 个 独立 
的 逻辑 值 ， 也 可 以 是 一 个 可 得 出 逻辑 值 的 实际 表达 式 ; Statements 关键 字 表示 分 支 的 语句 
代码 。 

在 让 语句 中 ， 当 日 仅 当 Condition 值 或 运算 结果 为 逻辑 真 (True) 时 ，Statements 语 和 
才 可 被 执行 。 和 否则 ，Statements 语句 将 被 跳 过 。 例 如 ， 判 断 一 个 值 是 否 是 字符 串 ， 如 是 字 
符 串 ， 则 将 其 输出 ， 代 码 如 下 所 示 。 


Var strTest = 'test' ; 


if ( 'string' === typeof strTest ) { 


console.log ( strTest ) ; 


} 

由 于 并 非 所 有 的 开发 工具 都 能 够 判断 出 耻 语 句 内 表达 式 的 一 些 错 误 书写 方法 (例如 错 
将 全 等 运算 符 书 写成 赋值 运算 符 等 )， 因 此 在 书写 让 语句 时 ， 通 常情 况 下 应 尽量 将 常量 书 
写 在 条 件 表达 式 的 左 侧 ， 变 量 和 表达 式 书写 在 条 件 表达 式 右 侧 ， 提 高 开发 工具 检查 这 种 书 
写 错 误 的 效率 。 

2. if...else 语句 


让 .else 语句 是 站 语句 的 升级 版 本 ， 属 于 典型 的 双 分 支流 程控 制 语句 ， 其 与 下 语句 的 
区 别 在 于 ,让 语句 仅 支 持 当 条 件 成 立时 判定 执行 某 一 段 语 句 ， 无 法 青 当 条 件 不 成 立时 进行 
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分 支 处 理 。 而 站 …else 语句 则 不 仅 可 以 在 条 件 成 立时 执行 一 段 语句 ， 当 条 件 不 成 立时 ， 该 
语句 还 可 以 执行 另 一 端 分 支 语句 ， 其 执行 流程 如 图 4-4 所 示 。 


昌 
ce < 
YES YES 
了 
图 4-3 站 语句 的 执行 流程 图 4-4 让 .else 语句 的 执行 流程 


在 Javascript 脚本 语言 中 ，if...else 语句 的 书写 和 使 用 方法 如 下 所 示 。 


if ( Condition ) { 


Statementsl ; 
|, 


else { 


Statements2 ; 
} 


在 上 面 的 伪 代 码 中 ，Condition 关键 字 表示 分 支流 程 的 判断 条 件 : Statementsl 关键 字 表 
示 当 Condition 表达 式 为 真 时 执行 的 语句 ; 而 Statements2 关键 字 表示 当 Condition 表达 式 为 
假 时 执行 的 语句 。 

站 .else 语句 可 以 对 一 个 表达 式 进行 完整 的 判断 ， 处 理 所 有 表达 式 可 能 的 结果 , 因此 在 
实际 开发 中 的 应 用 远 比 站 语句 更 加 广泛 。 例 如 ， 判 断 一 个 数字 是 否 能 被 数字 3 整除 ， 代 码 
如 下 。 


Var intNumber = 256 ; 
if ( 0 === intNumber %$ 3 ) { 


console.1og ( 该 数字 可 以 被 数字 3 整除 。' ) : 
} 


else { 


console.10og (' 该 数字 无 法 被 数字 3 整除 。' ) ; 
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由 于 数字 256 是 无 法 被 数字 3 整除 的 ,， 因此 上 面 的 代码 中 ，Javascript 将 执行 else 下 的 
语句 块 ， 输出 “该 数字 无 法 被 数字 3 整除 。” 的 文本 。 在 实际 开发 中 ， 为 避免 代码 执行 过 程 
中 某 些 分 支 的 数据 处 理 状况 被 程序 忽略 ， 造 成 遗漏 ， 应 尽量 多 使 用 计 ..else 语句 而 避免 使 
用 单独 的 站 语句 。 


3. if...else if 语句 


让.…else 站 语句 更 进一步 地 强化 了 逻辑 判断 的 分 支 数 量 , 其 可 以 对 两 个 以 上 的 分 支 条 件 
进行 判定 ， 然 后 决定 这 些 分 支 下 的 代码 是 否 执行 ， 其 代码 执行 逻辑 如 图 4-5 所 示 。 

让 .else 站 语句 相 比 之 前 两 种 分 支流 程 语句 ,其 可 以 支持 超过 三 种 以 上 的 条 件 判断 ， 
此 更 加 灵活 ， 其 使 用 方法 如 下 所 示 。 


if ( Conditionl ) { 


此 


Statementsl ; 
} 
else if ( Condition2 ) { 


Statements2 ; 


Statements3 ; 


} 


在 上 面 的 伪 代 码 中 ，Conditionl 关键 字 表示 第 一 个 分 支 的 判断 表达 式 ，Statementsl 关 
键 字 表 示 当 Conditionl 表达 式 为 真 时 执行 的 语句 ;Condition2 关键 字 表示 当 Conditionl 表 
达 式 为 假 时 进行 的 二 次 判断 表达 式 ，Statements2 关键 字 表示 当 Condition2 表达 式 为 真 时 执 
行 的 语句 ，Statements3 关键 字 表 示 当 Condition1、Condition2 等 系列 的 表达 式 均 不 成 立时 
执行 的 语句 。 

让 ...else 站 并 不 限定 else 让 语句 出 现 的 次 数 ， 也 就 是 说 ,该 语句 中 可 以 添加 任意 数量 的 
else if 语句 ， 判 断 当 上 一 级 条 件 表达 式 为 假 时 增加 新 的 条 件 判定 。 例 如 ， 可 以 编写 一 个 
if...else f 语 句 来 判定 变量 的 原始 数据 类 型 ， 然 后 通过 typeof 运算 符 依次 对 变量 进行 测试 ， 
实现 输出 结果 ， 代 码 如 下 。 


Var strText = 'Test Text' ; 


if ( 'string' === typeof strText ) { 
console.1og (“' 该 变量 是 字符 串 类 型 。' ) : 
} 


else if ( 'number' === typeof strText ) { 


console.1og (' 该 变量 是 数字 类 型 。' ) : 
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} 
else if ( 'boolean' === typeof strText ) { 


console.1og (' 该 变量 是 数字 类 型 。' ) ，; 
} 
else if ( "undefined' === typeof strText ) { 


console.1og ( "该 变量 未 定义 或 属于 未 定义 类 型 。' ) ，; 
} 


else { 


console.1og (' 该 变量 非 原始 类 型 或 属于 占 位 符 。' ) ; 
} 


在 上 面 的 代码 中 , 连续 使 用 了 三 个 else 让 语 名 分别 以 typeof 运算 符 对 strText 变量 的 原 
始 数 据 类 型 进行 判断 和 匹配 ， 以 在 上 一 次 判断 失败 后 再 次 进行 新 的 判断 ， 通 过 连续 四 个 条 
件 的 筛选 实现 对 数据 原始 类 型 的 判断 并 输出 了 结果 。 

4. switch...case 语句 


switch...case 语 句 也 是 一 种 多 分 支 判 断 的 语句 , 其 与 让 .else f 语 句 的 区 别 在 于 ,if...else 
让 语句 所 进行 的 判断 可 以 是 基于 多 个 不 同类 型 的 表达 式 ， 以 各 种 复杂 的 运算 结果 决定 代码 
块 的 执行 ， 而 switch...case 语句 则 只 能 对 某 一 个 表达 式 的 多 种 可 能 的 运算 结果 进行 判断 ， 
以 决定 执行 哪些 代码 。 

switch...case 语句 在 使 用 上 相 比 if...else 站 限制 较 多 ,但 是 其 特点 是 语法 比较 简洁 ， 同 
时 还 支持 一 些 复 合 地 连续 执行 ， 因 此 在 程序 开发 中 ，switch...case 语句 有 其 独特 的 作用 。 
该 语句 的 代码 执行 逻辑 如 图 4-6 所 示 。 


1 
< i 
i 
NO 
Statements 1 | 
YES 9 1 Case2 i 


1 1 


图 4-5 让 ..else 计 语句 的 执行 流程 图 4-6 switch...case 语句 的 执行 流程 
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与 让 .else 于 类 似 ，switch.…case 语句 不 限制 判定 分 支 的 数量 ， 开 发 者 可 以 对 一 个 表达 
式 可 能 的 任意 数量 的 结果 进行 判断 ， 如 下 所 示 。 


switch ( Condition ) { 


case Casel : 
Statementsl ; 

break ; 

Case Case2 : 
Statements2 ; 

break ; 


default : 
Statements3 ; 
break ; 
} 


在 上 面 的 伪 代 码 中 ，Condition 关键 字 表 示 switch...case 语句 判断 执行 分 支 的 表达 式 ; 
Casel 、Case2 等 关键 字 表示 Condition 表达 式 可 能 的 值 ，Statements1、Statements2 等 关键 
字 表 示 当 Condition 关键 字 分 别 为 Casel 或 Case2 等 值 时 执行 的 语句 ，Statements3 关键 字 
表示 默认 执行 语句 ， 意 即 当 所 有 的 Casel、Case2 等 值 都 不 符合 Condition 表达 式 的 运算 结 
果 时 执行 的 补救 代码 。 

switch...case 语句 与 ff、 证 ..else 以 及 if...else 让 等 语句 的 区 别 还 在 于 , 其 并 不 要 求 判断 
的 表达 式 一 定 能 够 得 到 一 个 逻辑 值 结果 。 其 判断 的 表达 式 可 以 获取 数字 、 字 符 串 等 各 式 各 
样 的 结果 ， 只 要 case 语句 后 的 值 与 表达 式 的 运算 结果 匹配 即 可 。 

例如 ， 编 写 一 个 判断 当前 日 期 是 星期 几 的 脚本 ， 即 可 通过 switch...case 语句 对 获取 的 
日 期 信息 值 进 行 比 对 ， 代 码 如 下 。 

var dtToday = new Date ( ) : 


var intDay = dtToday.getDay ( ) ; 
Switch ( intDay ) { 


case 0 : 

alert ( ' 今 天 是 周 日 。' ) ; 
case 1 < 

alert ( “今天 是 周一 。" ) ; 
Case 2 : 

alert (' 今 天 是 周二 。' ) ，; 
case 3 : 

alert ( “今天 是 周三 ) 
CSS 让 

alert ( ' 今 天 是 周 四 ) 
本 站 站 全 人 

alert ( "今天 是 周 五 ) 
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case 6 : 

alert ( “' 今 天 是 周 六 。' ) ; 
default : 

alert ( “我 也 不 知道 今天 是 周 几 。 ' ); 


上 面 的 代码 分 别 定义 了 dtToday 和 intDay 两 个 变量 ， 表 示 当 前 日 期 对 象 以 及 当前 星期 
的 数值 ， 通 过 日 期 对 象 的 一 个 方法 getDay0 获 取 数 值 并 赋予 intDay 变量 。 然 后 ， 再 使 用 
switch...case 语句 判断 日 期 的 数值 ， 进 行 计算 。 

在 执行 以 上 代码 时 ， 开 发 者 会 发 现 Web 浏览 器 连续 弹出 了 八 个 对 话 框 , 将 所 有 的 结果 
都 输出 了 ， 其 缘故 就 是 没有 在 每 个 case 语句 之 后 添加 break 语句 。 如 果 开 发 者 不 希望 在 执 
行 一 个 case 语句 后 连续 执行 之 后 的 其 他 case 语句 , 则 必须 在 该 case 语句 中 添加 break 语句 ， 
中 断代 码 执行 。 将 以 上 的 代码 修改 成 如 下 形式 ， 即 可 精确 判断 当前 日 期 ， 输 出 正确 的 结果 ， 
代码 如 下 。 


var dtToday = new Date ( ) : 
var intDay = dtToday.getDay ( ) ; 
switch ( intDay ) { 


$ 


case 0 : 

alert (' 今 天 是 周 日 。' ) ; 
break ; 
case 1 : 

alert ( “今天 是 周一 。' ) ，; 
break ; 
case 2 : 
alert (' 今 天 是 周二 。' ) ，; 
break ; 
CASe' 3 : 
alert ( ' 今 天 是 周三 。' ) ，; 


break ; 


case 4 : 


> 
汶 
并 
邢 
瑟 


alert 
break ; 
case 5 : 

alert 
break ; 


Case 6 : 


> 
汶 
并 
于 
出 


ei 
| 
并 
| 


alert 
break ; 
default : 

alert ( "我 也 不 知道 今天 是 周 几 。 " ); 


在 上 面 的 代码 中 ， 每 一 个 case 语句 都 添加 了 break 语句 ， 以 在 分 支 语句 执行 后 立即 中 
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断 程序 执行 。default 语句 由 于 在 分 支 控制 的 末尾 ， 因 此 可 以 将 break 语句 忽略 。 

在 书写 switch...case 语句 时 还 应 注意 ， 由 于 case 和 其 对 应 的 break 语句 之 间 构 成 了 一 
个 完整 的 语句 块 ， 因 此 case 语句 和 其 对 应 的 break 语句 在 缩 进 上 应 该 齐 平 ， 而 其 内 包含 的 
代码 则 应 多 缩 进 一 次 。 


4.4.2 ”迭代 流程 控制 


在 程序 开发 中 ， 如 果 需 要 重复 地 执行 一 段 代 码 ， 就 需要 使 用 到 进 代 控制 。 和 迭代 控 制 可 
以 根据 指定 的 表达 式 或 值 进行 判断 ， 当 其 表达 式 或 值 符合 一 定 的 条 件 时 重复 多 次 执行 一 段 
代码 ， 直 至 表达 式 或 值 变更 ， 不 再 符合 某 些 条 件 后 终止 。 

Javascript 脚本 语言 提供 了 四 种 迭代 流程 控制 语句 ， 即 while 语句 、do...while 语句 、for 
语句 和 for...in 语句 。 


1. while 语句 

while 语句 的 结构 和 计 语句 类 似 ， 其 可 以 对 一 个 表达 式 或 值 进行 逻辑 判断 ， 当 其 值 为 
真 时 , 重复 执行 一 段 代码 , 直至 其 值 变化 为 假 时 终止 。while 语句 的 执行 流程 如 图 4-7 所 示 。 

while 语句 的 特点 是 先进 行 一 次 轴 辑 判断 ,然后 再 决定 是 否 执行 代码 , 当 且 仅 当 录 辑 判 
断 结果 为 真 时 才 执行 代码 ， 和 否则 不 执行 ， 其 使 用 方法 如 下 所 示 。 


while ( Condition ) { 


Statements ; 


' 


在 上 面 的 伪 代 码 中 ,Condition 关键 字 表示 while 语 句 逻 辑 判断 的 表达 式 或 值 ; Statements 
关键 字 表 示 当 Condition 表达 式 或 值 为 真 时 需要 重复 执行 的 代码 。 例 如 ， 需 要 编写 一 个 计 
算 1 到 100 之 间 所 有 数字 之 和 的 程序 ， 代 码 如 下 。 


var intLoop = 1 ; 
var intSum = 0; 
while ( 100 >= intLoop ) { 


intSum += intLoop ; 
intLoop ++ 了 
console.log ( intSum ) ; // 输出 5050 


在 上 面 的 代码 中 ， 初 始 化 了 两 个 变量 ， 其 中 intLoop 为 基础 运算 的 初始 值 ，intSum 为 
运算 的 结果 。 在 while 循环 中 ， 通 过 对 intLoop 变量 的 判断 来 决定 是 否 需 要 重复 执行 while 
友 代 内 的 代码 ， 每 执行 一 次 就 将 intLoop 计数 器 递增 1， 当 intLoop 计数 器 递增 至 100 后 即 
终止 迭代 ， 此 时 ，intSum 变量 的 结果 就 是 1 到 100 之 间 所 有 整数 的 和 。 

在 实际 开发 中 ， 由 于 迭代 类 的 流程 控制 会 消耗 较 大 的 系统 资源 ， 开 发 者 应 尽量 保证 迭 
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代 的 条 件 判断 始终 有 一 个 指定 的 范围 ， 以 保障 兴 代 能 正确 结束 。 

如 果 办 代 的 条 件 判断 总 是 成 立 ， 就 成 为 了 一 个 死 循 环 。 虽然 在 很 多 编程 语言 中 死 循 环 
有 其 独特 的 使 用 价值 ， 但 是 在 Javascript 这 种 极端 依赖 Web 浏览 器 的 编程 语言 中 ， 死 循环 
往往 会 使 Web 浏览 器 沉 温 于 夫 代 运算 而 无 法 及 时 响应 ， 甚 至 造成 死机 ， 因 此 应 尽量 避免 使 
用 。 例 如 ， 下 面 的 代码 就 是 一 个 典型 的 死 循 环 ， 如 下 所 示 。 


while ( true ) { 


Console.1og (' 这 个 程序 无 法 终止 ' ) ; 
} 


2. do...while 语句 


do.….while 语 句 也 是 一 种 基于 简单 表达 式 判 断 的 迭代 语句 ,其 与 while 语句 的 区 别 在 于 ， 
while 语句 的 执行 首先 会 进行 表达 式 的 判断 ， 再 决定 迭代 是 否 执 行 ， 而 do...while 语句 和 
while 语句 的 判断 和 执行 顺序 正好 完全 相反 ,其 特点 是 先 执行 一 次 迭代 , 然后 再 判断 表达 式 
是 否 为 逻辑 真 ， 如 是 真 ， 执 行 下 一 次 迭代 ， 否 则 就 终止 欠 代 。do.…while 语句 的 执行 流程 如 


图 4-8 所 示 。 


NO 
下 一 四 3 


YES 


NO 


图 4-7 while 语句 的 执行 流程 图 4-8 ”do...while 语句 的 执行 流程 
在 书写 do...while 语句 时 ， 也 需要 注意 其 条 件 的 表达 式 要 书写 到 语句 的 末尾 部 分 ， 如 
下 所 示 。 


do 1{ 


Statements ; 


} 
while ( Condition ) ; // 输 出 5050 


在 上 面 的 伪 代 码 中 ，Statements 关键 字 表 示 友 代 的 语句 ，Condition 关键 字 表示 进行 下 
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一 次 迭代 的 条 件 表达 式 。 需 要 注意 的 是 ， 如 果 条 件 的 表达 式 相 同 ， 那 么 do.…while 语句 通 
常会 比 while 语句 多 执行 一 次 途 代 ， 因 此 在 使 用 do...while 语句 时 需要 充分 考虑 这 一 情况 。 
例如 ， 之 前 的 计算 1 到 100 之 间 所 有 整数 之 和 的 程序 ， 以 do.…while 语句 来 实现 的 方式 如 
下 所 示 。 


Var intLoop = 1 : 
var intSum = 0; 
dof 


intSum += intLoop ; 
intLoop ++ 了 
} 
while ( 100 >= intLoop ) ; 
console.log ( intSum ) ; 


在 上 面 的 代码 中 ， 同 样 声 明了 intLoop 和 intSum 两 个 变量 ， 并 通过 do...while 从 代 来 
对 intLoop 车 加 ， 每 次 迭代 都 将 县 加 的 结果 与 intSum 相 加 获取 最 终 1 到 100 之 间 所 有 整数 
之 和 。 

使 用 do...while 语 句 进行 迭代 时 同样 需要 为 其 判断 的 条 件 表达 式 限 定 一 个 指定 的 范围 
避免 死 循环 的 产生 。 


3. for 语句 


for 语句 是 一 种 最 常见 的 迭代 语句 ， 其 与 while 语句 和 
do...while 语句 的 区 别 在 于 ， 后 两 者 的 作用 是 根据 表达 式 的 好 
辑 值 来 作为 迭代 的 依据 , 而 for 语 句 是 一 种 基于 计数 器 的 迭代 ， 
其 根据 计数 器 的 数值 来 决定 是 否 迭 代 执 行 对 应 的 语句 ， 其 执 
行 流程 如 图 4-9 所 示 。 

在 for 语句 中 , 需要 定义 一 个 初始 化 的 表达 式 作为 迭代 的 
计数 器 ， 然 后 再 定义 该 计数 器 的 取 值 范围 (表达 式 和 计数 器 
县 加 或 累 减 的 幅度 )， 在 每 次 迭代 时 将 计数 器 县 加 或 累 减 后 代 
入 表达 式 中 进行 计算 ， 判 断 是 否 继 续 迭 代 流 程 ， 其 使 用 方法 
如 下 所 示 。 


for ( Initialization ; Condition ; Increment ) { 


Statements ; 


} 


在 上 面 的 伪 代 码 中 ，Initialization 关键 字 表示 迭代 的 计数 4-9 for 语句 的 执行 流程 
器 ; Condition 关键 字 为 计数 器 的 取 值 范围 表达 式 ; Increment 关键 字 表 示 计 数 器 变量 个 加 
或 累 减 的 幅度 范围 ， 其 通常 为 一 个 基于 赋值 运算 的 表达 式 ; Statements 关键 字 表 示 当 
Initialization 计数 器 的 值 符合 Condition 表达 式 的 需求 时 执行 的 迭代 代码 。 

for 语句 适合 对 一 些 有 指定 规律 数据 进行 指定 次 数 的 重复 性 运算 , 或 根据 指定 的 索引 遍 
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历数 组 等 。 例 如 ， 计 算 整 数 2 的 100 次 究 ， 即 可 将 2 作为 底数 并 将 指数 作为 计数 器 进行 迭 
代 ， 求 最 终究 的 代码 如 下 所 示 。 
Var intRadix= 2 ; 


Var intPower = 1;，; 
for ( var intExponent = 1 ; intExponent <= 100 ; intExponent ++ ) { 


intPower *= intRadix ; 


} 
console.1og ( '2 的 100 次 究 等 于 ' + intPower ) ，; 


在 实际 的 开发 工作 中 , for 语句 最 大 的 作用 是 根据 索引 对 指定 的 数组 进行 遍历 、 读 取 或 
处 理 数组 中 的 元 素 。 例 如 ， 在 下 面 的 代码 中 ， 就 定义 了 一 个 数组 ， 其 中 包含 几 个 元 素 ， 使 
用 for 语句 可 以 方便 地 遍历 该 数组 ， 依 次 输出 该 数组 中 大 于 5 的 元 素 值 。 


bi 四 
for ( var intIndex = 0 ; intIndex < arrData.length ; intIndex ++ ) { 


if ( 5 < arrData [ intIndex ] ) { 


console.1og ( 'arrData 数组 中 第 ' + ( intIndex + 1 ) + ' 个 元 素 ' + 
arrData [ intIndex ] + ' 大 于 数字 5' ) ，; 


于 


在 上 面 的 代码 中 , arrData 为 自 定义 的 一 个 包含 若干 数字 
的 数组 ， 通 过 将 for 语句 中 定义 的 变量 intIndex 作为 arrData Ee 
数组 的 索引 ， 媒 套 迁 判断 语句 ， 从 而 得 到 了 数组 中 所 有 比 数 
字 5 大 的 数字 元 素 并 将 其 输出 到 Web 浏览 器 的 控制 台中 。 

for 语句 在 实际 开发 中 的 用 途 十 分 广泛 。 在 处 理 各 种 数 
组 和 集合 数据 时 ，for 语句 是 必 备 的 工具 。 


4. for...in 语句 


for...in 语句 是 for 语句 的 一 个 变种 ， 其 与 for 语句 最 大 
的 区 别 在 于 ，for 语句 需要 定义 指定 的 计数 器 ， 通 过 计数 器 
来 决定 迭代 的 次 数 ， 而 for...in 语句 不 需要 计数 器 ， 其 可 以 
直接 枚 举 对 象 ， 读 取 和 操作 对 象 的 属性 ， 如 图 4-10 所 示 。 

for...in 语句 会 严格 地 逐个 枚 举 对 象 的 每 一 个 属性 , 直至 
所 有 属性 均 已 被 枚 举 后 自动 终止 ， 其 使 用 方法 如 下 所 示 。 


for ( Property in Object ) { 


oD 


图 4-10 ”for...in 语句 的 执行 流程 


Statements ; 
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在 上 面 的 伪 代 码 中 ，Property 关键 字 表示 一 个 替代 的 属性 名 称 ; Object 关键 字 表示 被 
枚 举 的 对 象 ，Statements 关键 字 表示 在 枚 举 过程 中 执行 的 代码 。 

例如 ， 在 下 面 的 代码 中 定义 了 一 个 名 为 person 的 对 象 ， 定 义 了 该 对 象 的 几 种 属性 ， 然 
后 即 可 通过 for...in 语句 枚 举 对 象 的 所 有 属性 。 


Var person = { 
name : "Sera Chain' ， 
站 本 全 站 半生 
birthday : "1983-09-05" 
各 六 


for ( prop in person ) { 


console.log ( prop + ':' + person [ prop ] ); 


} 


在 上 面 的 代码 中 , 使 用 了 一 个 临时 的 变量 prop 作为 对 象 的 属性 名 , 通过 该 属性 名 枚 举 
了 对 象 中 所 有 的 属性 ， 并 将 属性 名 和 属性 值 输出 到 Web 浏览 器 的 控制 台中 。 

由 于 Javascript 脚本 语言 是 一 种 面向 对 象 的 编程 语言 ， 其 将 数组 也 视 为 对 象 ， 所 以 
for...in 语句 也 可 以 通过 数组 的 索引 遍历 数组 的 所 有 元 素 。 例 如 ， 遍 历 之 前 定义 的 arrData 
数组 ， 就 可 以 使 用 for...in 语句 实现 ， 代 码 如 下 。 

i 发 全 和 

for ( index in arrData ) { 


if ( 5 < arrData [ index ] ) { 


console.1og ( 'arrData 数组 中 第 ' + ( index + 1 ) + ' 个 元 素 ' + 
arrData [ index ] + ' 大 于 数字 5' ) ; 


} 


需要 注意 的 是 ， 由 于 for.…in 语句 不 需要 定义 计数 器 ， 因 此 在 遍历 同一 个 数组 时 ， 其 所 
消耗 的 资源 要 比 for 语句 更 低 ， 执 行 效率 更 高 。 在 此 强烈 推荐 尽量 使 用 for.…in 语句 来 过 历 
数组 ， 以 提高 脚本 的 执行 效率 。 


4.4.3 流程 的 跳 转 

Javascript 脚本 语言 不 仅 支持 通过 条 件 判 断 决定 分 支 语句 的 执行 和 和 迭代 , 还 允许 开发 者 
通过 为 语句 添加 标记 对 代码 进行 更 加 严格 地 控制 ， 强 制 代码 跳 转 到 指定 的 流程 。 

1. 语句 的 标记 


Javascript 允许 开发 者 为 语句 添加 自 定义 的 标记 ， 将 标记 作为 语句 被 引用 时 的 凭据 。 当 
需要 执行 该 语句 时 ， 可 以 直接 通过 标记 来 实现 语句 流程 的 跳 转 ， 其 使 用 方法 如 下 。 


第 4 章 开发 Web 脚本 159 


Label : Statements ; 


在 上 面 的 伪 代 码 中 ，Label 关键 字 表 示 为 语句 定义 的 标记 ; Statements 关键 字 表 示 语 句 
的 内 容 。 例 如 ， 在 下 面 的 代码 中 ， 就 为 一 个 Javascript 语句 添加 了 名 为 Test 的 标记 ， 如 下 
所 示 。 


laTest : intLoop ++ ; 


为 语句 定义 标记 的 意义 在 于 ， 其 可 以 为 语句 提供 一 个 引用 的 接口 ， 供 break 语句 或 
continue 语句 等 快速 地 调用 ， 实 现代 码 流程 的 跳 转 。 标 记 的 命名 不 可 以 是 Javascript 的 关键 
字 、 保 留 字 ， 也 不 能 与 当前 程序 或 命名 空间 中 的 其 他 变量 、 对 象 和 类 重 名 。 在 此 推荐 采用 
类 似 变量 的 命名 法 则 为 其 命名 ， 即 用 小 驼峰 的 方式 命名 ， 前 缀 为 la， 以 示 与 其 他 变量 的 
区 别 。 


2. 终止 迁 代 语句 


在 之 前 介绍 switch...case 语句 时 已 经 使 用 过 break 语句 ，break 语句 除了 可 应 用 于 
switch...case 语句 之 外 ， 也 可 以 应 用 于 迭代 流程 ， 其 作用 就 是 立即 中 断 当前 迭代 或 指定 迭 
代 的 执行 流程 ， 跳 出 到 语句 块 的 外 部 ， 执 行 语 句 块 之 后 的 代码 。 

例如 ,下面 的 代码 用 于 计算 数字 2 的 寡 , 如 果 限 定 结果 取 值 范围 只 能 在 值 65536 以 内 ， 
就 可 以 通过 一 个 罗 辑 判断 中 断 迭 代 流 程 ， 代 码 如 下 。 


var intRadix= 2 ; 

Var intPower = 1;，; 

var intExponentLimit = 100 

for ( var intExponent = 1 ; intExponent <= intExponentLimit ; intExponent ++ ) { 


intPower *= intRadix ; 
if ( 65536 <= intPower ) { 


console.1og ( “' 数 据 溢 出 ， 请 检查 。' ) ; 
break ; 
} 
break 语句 除了 可 以 中 断 当 前 迭代 以 外 , 也 可 以 中 断 多 层 肉 套 的 迭代 , 此 时 就 需要 对 被 
中 断 的 迭代 先进 行 标记 ， 然 后 再 使 用 break 语句 进行 中 断 操作 ， 如 下 所 示 。 
break Label ; 
在 上 面 的 伪 代 码 中 ，Label 关键 字 表示 要 跳 转 到 的 语句 的 标记 名 称 。 例 如 ， 定 义 一 个 
双 层 赚 套 的 迭代 ， 将 外 层 的 迭代 进行 标记 ， 然 后 即 可 使 用 break 语句 及 时 中 断 这 一 迭代 ， 
如 下 所 示 。 


laLoop:for ( var intDoubleDigit = 0 ; intDoubleDigit < 10 ; intDoubleDigit ++ ) { 
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for ( var intSingleDigit = 0 ; intSingleDigit < 10 ; intSingleDigit ++ ) 


if ( 8 === intDoubleDigit && 0 === intSingleDigit ) { 


break laLoop; 
} 
console.log ( intDoubleDigit * 10 + intSingleDigit ); 


} 


在 上 面 的 代码 中 ， 本 身 为 输出 0 到 100 之 间 的 所 有 整数 ， 但 由 于 首先 为 外 部 的 迄 代 定 
义 了 一 个 laLoop 的 标记 ， 然 后 又 通过 break 语句 强制 中 断 了 该 迭代 的 执行 ， 因 此 输出 到 数 
字 79 后 即 终止 了 迭代 。 


3. 终止 当前 迭代 流程 


除了 直接 终止 整个 迭代 以 外 ,Javascript 还 允许 开发 者 通过 continue 语句 终 止 当前 迭代 ， 
快速 跳 转 到 下 一 次 迭代 中 。continue 语句 与 break 语句 的 区 别 在 于 ，break 语句 将 直接 终止 
整个 迭代 流程 , continue 语句 则 只 终止 这 一 次 重复 执行 , 并 不 会 终止 整个 迭代 流程 。 continue 
语句 的 使 用 方法 与 break 语句 类 似 ， 如 下 所 示 。 


continue [Label] ; 


continue 语句 的 书写 方式 与 break 语句 完全 相同 ， 在 上 面 的 代码 中 ，Label 关键 字 表 示 
continue 语句 终止 的 迭代 标记 ， 如 果 将 其 省 略 ， 则 表示 终止 的 为 当前 continue 语句 所 属 的 
迭代 流程 。 

例如 ， 在 下 面 的 代码 中 定义 了 一 个 迭代 流程 ， 依 次 输出 1 到 10 之 间 所 有 的 整数 。 如 
果 通 过 判断 当 计数 器 的 值 等 于 5 时 终止 当 次 迭代 , 则 可 以 在 逻辑 判断 中 使 用 continue 语句 ， 
如 下 所 示 。 


for ( var intCount = 1 ; intCount <=10 ; intCount ++ ) { 
if ( 5 === intCount ) { 


continue ; 
} 
console.log ( intCount ) ; 


F 


在 上 面 的 代码 中 , 由 于 使 用 的 终止 欠 代 语句 为 continue, 因此 当 变 量 intCount 值 等 于 5 

时 该 迭代 终止 ， 再 当 变量 intCount 值 琶 加 至 6 后 恢复 执行 ， 因 此 该 段 代 码 将 输出 1 到 10 
之 间 除 了 5 以 外 其 他 的 所 有 整数 。 

continue 语句 虽然 能 够 局 部 地 提升 代码 的 开发 便捷 性 和 执行 效率 , 但 在 实际 的 开发 中 ， 

于 程序 流程 设计 严密 性 和 代码 阅读 的 便捷 性 考虑 ， 应 尽量 避免 过 多 的 流程 跳 转 操作 。 事 
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实 上 很 多 企业 的 代码 开发 规范 中 明文 禁止 使 用 流程 跳 转 ， 以 避免 复杂 代码 的 执行 流程 造成 
的 维护 问题 。 


4.5 国 数 


在 数学 中 ， 函 数 用 来 描述 传 入 参数 和 唯一 返回 值 之 间 发 生 的 对 应 关系 。 计 算 机 程序 开 
发 领域 引入 了 这 一 概念 ， 用 于 封装 在 指定 作用 域 中 具有 一 个 唯一 名 称 的 代码 块 ， 通 过 代码 
块 内 包含 的 一 些 代码 语句 对 数据 进行 处 理 。 

由 于 Javascript 是 一 种 弱 类 型 的 脚本 语言 ， 其 本 身 并 没有 类 、 命 名 空间 等 面向 对 象 编 
程 的 强 类 型 语言 的 概念 。 在 Javascript 中 ， 很 多 面向 对 象 编程 的 语言 特性 都 是 通过 函数 来 
实现 的 。 因 此 ， 函 数 的 各 种 用 法 是 Javascript 中 最 重要 的 基础 知识 。 


4.5.1 创建 函数 


在 绝 大 多 数 编程 语言 中 ,一 个 完整 的 函数 通常 都 包括 四 个 组 成 部 分 ， 即 函数 名 、 参 数 、 
处 理 代码 和 返回 值 。 其 中 ,函数 名 是 当前 作用 域 中 唯一 的 函数 标识 ; 参数 是 外 部 传 入 函数 ， 
被 函数 处 理 的 数据 ;处 理 代 码 的 作用 是 对 传 入 的 参数 进行 计算 和 处 理 ; 返回 值 则 是 处 理 代 
码 对 参数 进行 计算 后 返回 的 结果 。 因 此 ， 创 建 一 个 完整 的 函数 ， 就 是 使 用 指定 的 语法 将 以 
上 四 个 组 成 部 分 书写 出 来 的 过 程 。 


1， 自 定义 函数 


在 Javascript 脚本 语言 中 ， 开 发 者 可 以 通过 多 种 方式 来 创建 函数 ， 其 中 最 基本 的 方式 
如 下 所 示 。 


function FunctionName ( [Arguments] ) { 


Statements 7 
[return ReturnValue] ; 


在 上 面 的 代码 中 ，FunctionName 关键 字 表示 函数 的 名 称 ; Arguments 关键 字 表示 函数 
参数 的 集合 ， 其 可 以 是 一 个 单独 的 参数 ， 也 可 以 是 若干 以 逗号 分 隔 的 参数 序列 ;Statements 
关键 字 表 示 函 数 的 语句 ，RetumValue 表示 函数 的 返回 值 。 

例如 ， 在 下 面 的 代码 中 ， 就 定义 了 一 个 最 简单 的 函数 ， 其 功能 是 输出 Hello World 字 
符 串 。 

function HelloWorld ( ) { 


console.log ( "Hello ，World!' ) ; 
} 


在 该 函数 所 在 的 作用 域 中 ， 开 发 者 可 以 通过 直接 书写 函数 的 名 称 和 括号 的 方式 调用 该 
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函数 ， 代 码 如 下 。 

HelloWorld ( ) : 

以 上 的 函数 实际 上 是 直接 进行 了 一 项 程序 操作 ， 并 未 处 理 数据 ， 因 此 不 需要 定义 参数 
和 返回 值 。 通 常情 况 下 ， 如 果 需 要 对 某 一 个 或 一 些 数据 进行 处 理 ， 可 以 参数 的 方式 将 这 些 
数据 传 入 函数 内 部 ， 进 行 处 理 后 再 通过 返回 值 输出 。 例 如 ， 求 两 个 数字 的 平均 值 ， 代 码 
如 下 。 


function Average ( numl , num2 ) { 


Var intAverage = NaN ; 
if ( "number' === typeof numl && 'number' === typeof num2 ) { 


Var intAverage = ( numl + num2 ) / 2; 
; 
return intAverage ; 


} 


在 上 面 的 代码 中 定义 了 两 个 参数 分 别 为 numl 和 num2， 在 函数 内 部 定义 了 一 个 
intAverage 的 变量 作为 输出 的 平均 值 结果 。 在 进行 平均 值 计 算 之 前 首先 判断 numl 和 num2 
是 否 为 数字 ， 如 是 则 进行 平均 计算 ， 否 则 保留 intAverage 的 原始 值 NaN。 调 用 该 函数 时 ， 
如 果 输 入 的 参数 为 数字 ， 则 该 函数 将 返回 数字 的 平均 值 ， 否 则 将 返回 NaN， 如 下 所 示 。 
); // 输 出 数字 3 
) ) ; // 输 出 NaN 


console.log ( Average ( 1, 5) 
console.log ( Average ( 'a' ,1 


在 编写 函数 时 ， 对 所 有 传 入 的 数据 (包括 参数 、 调 用 的 外 部 值 等 进行 类 型 和 值 的 验 
证 是 一 个 良好 的 习惯 ,其 可 以 有 效 地 避免 数据 类 型 或 值 不 符合 预期 而 引发 的 各 种 逻辑 错误 。 


2. 匿名 函数 


在 创建 函数 时 ， 也 可 以 直接 将 一 个 匿名 函数 作为 值 赋予 一 个 变量 ， 实 现 函 数 的 定义 ， 
方法 如 下 。 
var FunctionName = function ( [Arguments] ) { 
Statements ; 


[return ReturnValue ;] 


}; 


在 上 面 的 伪 代 码 中 ，FunctionName 关键 字 表示 函数 的 名 称 ; Arguments 关键 字 表示 函 
数 的 单独 参数 或 以 逗号 分 隔 的 参数 序列 ; Statements 关键 字 表 示 函 数 中 的 语句 ; ReturmValue 
关键 字 表示 函数 的 返回 值 。 例 如 ， 之 前 求 乘积 的 函数 也 可 以 这 种 赋值 的 方式 书写 ， 代 码 
如 下 。 


var GetMultiple = function ( num , multiple ) { 
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if ( "number' === typeof num && "number' === typeof multiple ) { 
return num * multiple ; 


}; 


以 匿名 函数 赋值 的 方式 定义 函数 需要 注意 在 完成 定义 的 右 大 括号 “}” 右 侧 必 须 添加 行 
末 结 束 的 分 号 “;” 以 正确 地 结束 代码 行 。 


2. 函数 的 返回 


返回 值 是 函数 在 处 理 数据 后 反馈 给 程序 的 结果 。 在 很 多 编程 语言 中 ， 都 会 根据 函数 是 
否 具 有 返回 值 来 将 其 分 类 。 例 如 ， 在 VBScript 脚本 语言 中 ， 有 返回 值 的 被 视 为 函数 ， 无 返 
回 值 的 被 视 为 过 程 。 

但 是 ， 在 Javascript 脚本 语言 中 ， 所 有 的 函数 都 具有 返回 值 。 如 果 开发 者 没有 手工 为 
函数 定义 返回 值 ， 那 么 Javascript 会 将 函数 的 返回 值 视 为 undefined。 例 如 ， 在 下 面 的 代码 
中 ， 就 定义 了 一 个 不 包含 显 式 返回 值 的 函数 ， 如 下 所 示 。 


function PrintText ( text ) { 
if ( 'string' === typeof text ) { 


console.log ( text ) ; 
} 


else { 
console.log ( 'Error:Argument type is not string!' ) ; 


} 

在 调用 该 函数 时 ， 如 果 强 制 将 其 输出 ， 则 Javascript 会 运算 出 一 个 undefined 的 结果 ， 
代码 如 下 。 

console.log( PrintText ('My Text.') ); // 输 出 My text. 后 再 输出 undefined 


如 果 以 显 式 的 方式 通过 retum 语句 为 函数 定义 一 个 返回 值 ， 则 在 调用 函数 时 ， 可 将 函 
数 以 类 似 一 个 变量 或 对 象 的 方式 引用 。 例 如 ， 在 下 面 的 例子 中 ， 就 编写 了 一 个 包含 显 式 返 
回 值 的 函数 ， 通 过 参数 求 乘法 运算 的 结果 ， 代 码 如 下 所 示 。 


function GetMultiple ( num ，multiple ) { 
if ( "number' === typeof num && "number' === typeof multiple ) { 


return num * multiple ; 
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在 使 用 该 函数 时 ， 可 以 直接 为 函数 定义 参数 ， 然 后 再 以 变量 或 对 象 的 方式 引用 函数 运 
算 的 结果 ， 如 下 所 示 。 


var intNumber = 3 : 
Var intMultiple = 5 7 


// 输 出 “3 乘 以 5 的 结果 为 15” 

console.log ( '3 乘 以 5 的 结果 为 ' + GetMultiple ( intNumber ，intMultiple ) ) ; 

需要 注意 的 是 ，retum 语句 会 直接 结束 函数 的 执行 ， 在 函数 的 代码 流程 中 ， 所 有 retum 
之 后 的 语句 都 是 无 效 语句 ， 并 不 会 被 程序 执行 。 


4.5.2 ”函数 的 参数 


参数 是 外 部 代码 传递 到 函数 内 部 的 数据 ， 是 函数 与 外 部 数据 交互 的 接口 。 在 之 前 的 小 
节 中 ， 已 经 介绍 了 自 定义 函数 和 调用 函数 时 使 用 参数 的 基本 方法 ， 在 Javascript 脚本 语言 
中 ， 还 可 以 更 进一步 对 参数 进行 设计 ， 使 程序 能 够 满足 更 加 灵活 的 开发 需求 。 


1. 参数 的 传递 


参数 的 传递 是 指 在 调用 函数 时 将 指定 的 值 传 入 到 函数 的 参数 中 ， 对 这 些 值 进 行 处 理 的 
过 程 。 在 研究 函数 参数 的 传递 时 ， 可 以 将 函数 的 参数 分 为 形式 参数 和 实际 参数 两 大 类 。 其 
中 ， 形 式 参 数 是 指 在 创建 函数 时 定义 的 参数 名 称 ， 其 本 身 仅仅 是 建立 了 一 个 虚拟 化 的 、 形 
式 上 的 参数 ， 并 预 置 了 对 参数 处 理 的 方式 。 实 际 参数 是 指 在 函数 调用 时 ， 对 参数 进行 具体 
化 、 值 化 之 后 的 数据 ， 其 本 身 己 经 真正 以 实际 数据 的 形式 存在 ， 因 此 被 称 作 “ 实 际 ” 的 

例如 ， 在 下 面 的 代码 中 ， 定 义 了 一 个 求 三 数 平均 值 的 函数 。 

function GetAverage3 ( numl , num2 , num3 ) { 

var intAverage = 0 ; 


if ( 'number' === typeof numl && 
'number' === typeof num2 && 
'number' === typeof num3 ) { 


intAverage = ( numl + num 2 + num3 ) 3 : 
return intAverage ; 
} 
else { 
console.1og (' 传 入 的 参数 有 误 ， 其 可 能 非 数 字 类 型 ' ) ; 
} 
} 


在 上 面 的 代码 中 ， 分 别 为 GetAverage3(0) 函 数 定义 了 三 个 参数 numl1、num2 和 num3， 
在 定义 函数 的 这 一 环节 , 这 三 个 参数 并 没有 实际 的 值 , 其 存在 仅仅 是 形式 上 的 。 在 Javascript 
中 ， 并 不 会 为 这 三 个 参数 分 配 内 存单 元 ， 也 不 会 对 这 三 个 参数 进行 处 理 。 

如 果 使 用 以 上 函数 进行 一 次 实际 的 平均 数 运算 , 例如 ， 对 2、3、5 三 个 质数 求 平均 值 ， 
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则 实际 上 就 是 将 这 三 个 参数 转换 为 实际 参数 ， 如 下 所 示 。 
console.log ( GetAverage3 (2，3，5 ) ) :> 


在 上 面 的 代码 中 ， 调 用 了 GetAverage30 函 数 对 质数 2、3 和 5 进行 了 运算 ， 在 执行 该 
函数 的 过 程 中 ，Javascript 会 立即 为 三 个 参数 分 配 内 存单 元 ， 然 后 进行 计算 ， 直 至 执行 完毕 
后 才 会 将 这 三 个 参数 所 占用 的 内 存单 元 回收 。 

在 函数 调用 过 程 中 ， 参 数 的 传递 只 能 是 单 向 的 ， 即 只 能 将 实际 参数 传递 给 形式 参数 ， 
不 能 反 其 道 而 行 之 。 

函数 参数 的 传递 还 可 以 分 为 值 传递 和 引用 传递 两 种 。 其 中 ， 当 参数 传递 的 数据 为 三 种 
原始 数据 类 型 (字符 串 、 数 字 、 布 尔 值 》 时 ， 这 种 传递 被 称 作 值 传递 ， 在 传递 后 ， 即 便 实 
际 参 数 再 次 发 生变 化 ， 形 式 参数 往往 不 会 随 实际 参数 变化 ,也 就 是 说 ， 值 传递 仅 传递 一 次 ， 
不 会 进行 二 次 传递 。 

当 参 数 传递 的 数据 为 引用 数据 类 型 〈 例 如 对 象 、 数 组 、 日 期 、 正 则 表达 式 以 及 其 他 自 
定义 的 对 象 类 型 ) 时 ， 这 种 传递 被 称 作 引 用 传递 。 引 用 传递 过 程 中 传递 的 是 一 个 复杂 的 对 
象 ， 在 传递 后 ， 形 式 参数 与 实际 参数 保持 同步 更 新 。 实 际 参数 如 果 发 生变 化 〈 例 如 对 象 的 
重 载 、 成 员 的 变更 、 数 组 元 素 的 扩充 和 缩减 、 日 期 重新 实例 化 或 其 他 对 象 的 变更 )， 则 传递 
的 参数 也 会 随 之 发 生变 化 。 在 引用 传递 中 ， 参 数 的 传递 是 即时 的 。 


2. arguments 参数 集合 


arguments 参数 集合 是 Javascript 为 解决 在 函数 内 部 隐 式 调用 函数 参数 时 提供 的 一 种 解 
决 方案 ， 其 意义 在 于 ， 将 函数 的 所 有 参数 看 作 是 一 个 整合 的 整体 集合 ， 通 过 一 个 指定 的 集 
合 名 称 arguments 即 可 实现 对 函数 所 有 参数 的 读 取 和 调用 。 

arguments 参数 集合 以 类 似 数 组 的 形式 存在 ， 函 数 的 每 一 个 参数 都 被 视 为 arguments 数 
组 的 一 个 元 素 。 通 过 arguments 参数 集合 ， 开 发 者 可 以 更 加 灵活 地 使 用 函数 的 参数 ， 为 函 
数 定义 不 定数 量 的 参数 并 以 隐 式 的 方式 调用 这 些 参 数 。 例 如 ， 在 之 前 的 小 节 中 已 经 编写 过 
求 指定 数量 (3 个 ) 的 数字 的 平均 值 。 在 引入 arguments 参数 集合 的 概念 后 ， 可 以 进一步 地 
编写 求 任意 数量 数字 平均 值 的 函数 ， 实 现 更 加 强大 的 运算 功能 ， 如 下 所 示 。 


function GetAverage ( ) { 


// 初 始 化 所 有 有 效 参数 构成 的 数组 集合 
Var arrValidArguments = [ ] : 
// 初 始 化 所 有 有 效 参数 的 和 变量 
var intValidSum = 0 ; 
// 初 始 化 所 有 有 效 参数 的 平均 值 变量 
Var intValidAverage = 0 : 
// 裔 历 参 数 集合 
for ( arg in arguments ) { 
// 判 断 参 数 是 否 为 数字 类 型 
if ( "number'" === typeof arguments [ arg ] ) { 
// 将 有 效 的 参数 追加 到 有 效 参 数 的 集合 中 
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arrValidArguments.push ( arguments [ arg ] ); 
} 
上 
// 遍 历 有 效 参 数 的 集合 ， 计 算 所 有 有 效 参 数 之 和 
for ( arg in arrValidArguments ) { 
intValidSum += arrValidArguments [ arg ] ; 


} 


// 计 算 所 有 有 效 参数 的 平均 值 
intValidAverage = intValidSum / arrValidArguments.length ; 
// 返 回 所 有 有 效 参 数 


return intValidAverage ; 


} 


在 上 面 的 代码 中 , 采用 了 两 个 for...in 办 代 , 首先 迭代 判断 载 入 的 参数 是 否 为 数字 类 型 
数据 ， 如 是 ， 判 定 为 有 效 ， 将 其 追加 到 临时 的 数组 中 ， 如 和 否 ， 则 将 其 忽略 。 第 二 次 迭代 的 
目的 是 遍历 临时 的 数组 集合 ， 将 所 有 有 效 的 参数 相 加 并 求 出 平均 值 。 

例如 ， 调 用 以 上 函数 来 获得 数字 3、5、9 和 字符 串 b' 四 个 值 的 平均 值 ， 其 中 ， 前 三 个 
值 是 有 效 值 ， 最 后 一 个 值 无 效 将 被 忽略 ， 代 码 如 下 。 


console.log ( GetAverage (3 ,5,9, 'b') ) : 


arguments 参数 集合 本 身 的 结构 与 数组 十 分 类 似 , 因此 所 有 数组 的 属性 、 方法 以 及 使 用 
的 方式 在 arguments 参数 集合 中 都 是 有 效 的 。 例如， 通过 索引 来 读 取 arguments 参数 集合 某 
个 参数 元 素 ， 可 以 用 中 括号 的 方式 调用 ， 如 下 所 示 。 


console.log ( arguments [0 ] ) : 


同 理 ， 使 用 arguments 参数 集合 的 length 属性 可 以 求 得 该 集合 中 元 素 的 数量 ， 如 下 
所 示 。 


console.log ( arguments.length ) ; 


在 使 用 arguments 参数 集合 时 需要 注意 ，arguments 参数 集合 在 函数 定义 时 会 被 视 为 是 
只 读 的 ， 也 就 是 说 无 法 对 其 进行 排序 、 追 加 元 素 、 删 减 元 素 等 操作 。 参 数 的 顺序 也 十 分 重 
要 ， 在 使 用 参数 集合 时 ， 应 尽量 将 同类 的 参数 放 在 函数 参数 序列 的 最 前 或 最 后 以 防止 其 他 
人 在 调用 函数 时 出 错 。 有 具体 的 同类 参数 放置 的 位 置 应 该 以 编码 规约 的 形式 固定 下 来 。 在 此 
推荐 将 若干 同类 参数 放 在 函数 参数 集合 的 最 前 面 。 


3， 参数 的 默认 值 


参数 的 默认 值 是 指 在 函数 定义 时 强制 对 函数 的 参数 初始 化 并 定义 一 个 指定 的 值 ， 以 防 
止 在 调用 函数 时 因 未 传递 该 参数 而 导致 实际 参数 缺失 的 错误 。 例如 , 在 C# 等 大 型 编程 语言 
中 ， 就 允许 在 为 函数 分 配 参数 时 直接 在 参数 后 赋值 定义 默认 值 。 

Javascript 与 其 他 编程 语言 的 区 别 在 于 , 其 不 支持 这 种 为 函数 添加 参数 时 定义 默认 值 的 
语法 ， 因 此 只 能 通过 变通 的 方式 实现 这 一 功能 。 其 原理 是 在 函数 的 代码 块 中 首先 判断 参数 


第 4 章 开发 Web 脚本 167 


是 否 存在 ， 如 是 ， 则 对 参数 进行 处 理 ， 如 否 ， 则 直接 强制 为 参数 赋值 。 例 如 ， 在 求 两 个 数 
字 之 和 的 函数 中 定义 参数 的 默认 值 为 0， 代码 如 下 。 


function GetSum2 ( numl ，num2 ) { 


// 为 第 一 个 参数 添加 默认 值 
numl = numl || 0 :> 
// 为 第 二 个 参数 添加 默认 值 
num2 = num2 11 0 : 
// 判断 参数 有 效 性 并 求 和 
if ( "number' === typeof numl && 'number' === typeof num2 ) { 
return numl + num2 ; 
} 
} 


在 上 面 的 代码 中 ， 就 分 别 对 numl 和 num2 两 个 参数 进行 了 存在 性 判断 ， 判 断 当 其 不 
存在 时 强制 为 其 定义 默认 值 ， 以 保障 在 缺乏 任意 一 个 参数 时 仍然 能 够 完成 计算 。 为 函数 的 
参数 定义 默认 值 是 一 种 良好 的 开发 习惯 ,其 可 以 规避 很 多 调用 函数 时 出 现 的 参数 缺乏 错误 。 


4.5.3 函数 对 象 


由 于 Javascript 脚本 语言 是 一 种 面向 对 象 编程 的 语言 ， 因 此 其 将 所 有 实体 都 视 为 是 一 
种 对 象 。 函 数 这 一 概念 也 不 例外 ， 实 际 上 ， 所 有 的 函数 无 论 全 局 函数 或 自 定 义 函 数 都 属于 
Function 类 的 一 个 实例 ， 其 可 以 调用 Function 类 的 所 有 属性 和 方法 。 这 一 特性 为 开发 者 提 
供 了 研究 函数 的 实质 ， 即 函数 也 是 Javascript 中 的 一 种 引用 类 型 。 


1. 创建 函数 对 象 


在 创建 一 个 函数 时 ， 开 发 者 既 可 以 使 用 传统 的 function 语句 创建 函数 ， 也 可 以 用 类 似 
创建 对 象 实例 的 方式 创建 函数 ， 其 方法 如 下 所 示 。 


Var FunctionName = new Function ( [Arguments] ， 'Statements; [return 
ReturnValue] ;' ); 


在 上 面 的 伪 代 码 中 ，FunctionName 关键 字 表示 函数 的 名 称 ，Arguments 关键 字 表示 函 
数 的 单独 参数 或 以 逗号 分 隔 的 参数 序列 ; Statements 关键 字 表 示 函 数 中 的 语句 ; ReturmValue 
关键 字 表 示 函 数 的 返回 值 。 

在 使 用 以 上 方法 定义 函数 时 ， 需 要 注意 函数 对 象 所 属 的 引用 类 型 为 Function， 首 字母 
必须 大 写 ， 且 函数 的 语句 和 返回 值 等 内 容 必 须 连接 为 一 个 单独 的 字符 串 ， 作 为 构造 函数 的 
最 后 一 个 参数 书写 。 例 如 ， 之 前 的 HelloWorld 程序 也 可 以 改写 为 如 下 形式 。 


Var HelloWorld = new Function ( "alert ( \'Hello , World!'\' ) ; ' ) :; 


如 果 需 要 为 此 类 函数 传递 参数 ， 可 以 将 函数 的 参数 书写 在 Function 构造 函数 内 ， 但 需 
要 注意 的 是 函数 的 语句 和 返回 值 的 字符 串 必须 作为 Function 构造 函数 的 最 后 一 个 参数 。 例 
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如 ， 之 前 编写 的 求 乘积 的 函数 ， 其 也 可 以 按 如 下 的 方式 书写 。 


Var GetMultiple = new Function ( num ，multiple ， 
'if ( \'number\' === typeof num &&' '\'number\' === typeof multiple )' + 
'{" + 'return num * multiple ;"' +'}" 


); 


需要 注意 的 是 ， 当 把 函数 的 代码 写 在 同一 行 时 ， 需 要 为 创建 函数 的 语句 末尾 添加 分 号 
“;” 但 如 果 将 其 以 正常 函数 语句 块 的 方式 书写 ， 则 行 末尾 的 分 号 “;” 可 以 被 省 略 。 

虽然 以 对 象 的 方式 创建 函数 在 Javascript 语法 中 是 完全 合法 的 ， 也 符合 面向 对 象 编 程 
的 基本 理念 ， 但 是 以 普通 方式 创建 函数 ， 函 数 内 部 的 代码 将 被 以 原生 代码 的 方式 解析 ， 而 
以 对 象 的 方式 创建 函数 , 绝 大 多 数 Web 浏览 器 都 需要 将 以 构造 函数 参数 方式 存在 的 函数 内 
部 代码 以 字符 串 的 方式 先进 行 一 次 解析 ， 再 将 其 转换 为 原生 代码 ， 因 此 其 效率 较 低 ， 会 消 
耗 更 多 的 系统 资源 。 在 实际 开发 中 ， 仍 然 建议 开发 者 尽量 避免 以 对 象 的 方式 创建 函数 ， 而 
采用 function 语句 或 变量 赋值 的 方式 来 创建 函数 。 


2. 函数 的 重 载 


基于 函数 是 一 种 特殊 引用 类 型 数据 的 特性 ， 可 以 很 容易 地 将 函数 理解 为 一 种 已 声明 的 
引用 类 型 数据 。 因 此 ， 与 其 他 引用 类 型 数据 类 似 ， 在 声明 函数 并 创建 函数 内 部 的 语句 执行 
后 ， 开 发 者 仍然 可 以 对 函数 的 语句 执行 过 程 进行 修改 ， 使 得 函数 本 身 可 以 满足 更 多 功能 性 
的 需求 。 这 种 对 函数 进行 二 次 修改 的 操作 被 称 作 函 数 的 重 载 。 

例如 , 在 下 面 的 代码 中 ， 就 以 函数 对 象 的 方式 建立 了 一 个 函数 ， 并 进行 了 简单 的 重 载 ， 
通过 重 载 使 函数 增强 函数 的 功能 ， 如 下 所 示 。 


var GetSum = new Function ( numl ，num2 ，'numl = numl || 0;'+ 
"num2 = num2 || 0 7 "十 
'if ( \'number\' === typeof numl && \'number\' === typeof num2){' + 
'return numl + num2 7?" + '}' ); 
Var GetSum = new Function ( 'var intArgumentIndex = 0 ;'+ 
"var intValidArgumentIndex = 0 ;' + 'var arrValidArguments = [ ] ;'+ 


"var flSsum = 0 ;' + if ( 0 < arguments.length ) {' + 

"for ( intArgumentIndex in arguments ) {' + 

'if ( \'number\' === typeof arguments [ intArgumentIndex ] ) {' + 
"arrValidArguments.push ( arguments [ intArgumentIndex ] );' + '}' + 
'}"' + "for ( intValidArgumentIndex in arrValidArguments ) {' + 
'flSum += arrValidArguments [ intValidArgumentIndex ];' + '}' 十 
ratarn Eloums + "3 "olae 41" 4 "retwenm OF + "}》 


在 上 面 的 代码 中 ， 首 先 以 函数 对 象 的 方式 定义 了 一 个 包含 两 个 参数 的 函数 GetSum， 
用 于 求 指定 两 个 数字 之 和 。 然 后 ， 再 次 通过 函数 对 象 的 方式 定义 了 一 个 同名 的 全 新 函数 ， 
用 于 求 任意 几 个 有 效 数字 之 和 。 第 二 个 函数 对 第 一 个 函数 进行 了 重 载 ， 在 不 影响 初始 函数 
基本 功能 的 情况 下 对 其 功能 进行 了 扩充 。 

实际 上 ， 并 非 上 只 有 以 函数 对 象 方式 定义 的 函数 才能 重 载 ， 任 意 的 一 种 函数 定义 方式 都 
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可 以 用 类 似 的 方式 重 载 。 例 如 ， 将 以 上 的 重 载 过 程 修改 为 普通 函数 的 方式 ， 同 样 可 以 实现 
重 载 的 效果 ， 代 码 如 下 。 


function GetSum ( numl , num2 ) { 
numl = numl || 0 : 
num2 = num2 || 0 : 
if ( "number' === typeof numl && 'number' === typeof num2 ) { 


return numl + num2 ; 
: 
} 


function GetSum ( ) { 


Var intArgumentIndex = 0 : 
var intValidArgumentIndex = 0 : 
var arrValidArguments = [ ] : 
var flSum = 0 : 
if ( 0 < arguments.length ) { 
for ( intRArgumentIndex in arguments ) { 
if ( 'number' === typeof arguments [ intRArgumentIndex ] ) { 
arrValidArguments.push ( arguments [ intArgumentIndex ] ) : 
} 
} 
for ( intValidArgumentIndex in arrValidArguments ) { 
flSum += arrValidArguments [ intValidArgumentIndex ] ; 
} 
return flSum; 
} 
else { 
return 0; 
} 
} 


以 上 代码 是 对 之 前 以 对 象 方式 创建 的 函数 的 改写 ， 其 第 二 个 函数 同样 实现 了 函数 的 重 
载 。 函 数 的 重 载 ， 实 际 上 就 是 将 一 个 函数 抽象 为 实体 ， 是 这 个 实体 指向 不 同 对 象 的 指针 ， 
在 这 种 情况 下 ， 函 数 的 名 称 只 是 指向 函数 对 象 的 引用 。 理 解 了 这 种 复杂 关系 ， 就 可 以 在 实 
际 开发 中 更 加 灵活 地 使 用 函数 。 

3. 函数 的 属性 和 方法 

由 于 在 Javascript 脚本 语言 中 ， 函 数 被 视 为 一 种 对 象 ， 所 有 这 些 函数 都 被 视 为 是 一 个 
对 象 的 抽象 类 ， 因此 函数 也 具有 属性 和 方法 等 函数 类 的 成 员 。Javascript 脚本 语言 为 所 有 自 
定义 的 函数 提供 了 length 属性 ， 用 于 获取 函数 参数 的 个 数 。 例 如 ， 在 下 面 的 代码 中 定义 的 
函数 ， 就 可 以 通过 length 属性 读 取 参 数 ， 代 码 如 下 。 


170 高 效 Web 前 端 开发 之 路 一 一 YUI 3.15 


function GetSum ( numl , num2 ) { 


numl = numl || 0; 
num2 = num2 || 0 : 
if ( "number' === typeof numl && "number' === typeof num2 ) { 


return numl + num2 ; 
} 
} 
Console.log ( GetSum.length ) ; // 输 出 2 


需要 注意 的 是 ，length 属性 仅 能 读 取 定义 某 个 函数 时 该 函数 显 式 定义 的 参数 的 个 数 。 
如 果 使 用 arguments 参数 集合 等 方式 隐 式 定义 函数 的 参数 ， 则 length 属性 将 无 法 读 取 到 真 
实 调用 的 函数 参数 。 例 如 ， 用 length 属性 求 任意 个 数字 之 和 的 函数 的 参数 个 数 ， 就 只 能 得 
到 数字 0。 

除了 length 属性 外 ，Javascript 脚本 语言 的 自 定义 函数 还 支持 toString0 方 法 , 用 于 输出 
函数 的 源 代码 ， 例 如 ， 定 义 一 个 输出 信息 的 函数 ， 然 后 即 可 为 该 函数 使 用 toString0 方 法 读 
取 源 代码 ， 代 码 如 下 。 

function AlertMessage ( text ) { 

alert ( text ) ; 


} 
// 输 出 function AlertMessage ( text ) { alert ( text ) ; } 
console.log ( AlertMessage.toString( ) ) ; 


在 上 面 的 代码 中 ， 就 通过 函数 的 toString0 方 法 输出 了 定义 该 函数 的 所 有 源 代码 。 需 要 
注意 的 是 ，toString0) 方 法 仅 支 持 自 定义 函数 ， 如 果 对 Javascript 原生 的 函数 执行 此 命令 ， 则 
仅 会 输出 函数 定义 时 的 名 称 ， 无 法 查看 函数 内 部 的 代码 内 容 。 


4.6 小 结 


Javascript 脚本 语言 最 初 仅 是 作为 NetScape 浏览 器 的 一 个 附属 工具 ， 供 前 端 开发 者 完 
成 一 些 简单 的 交互 任务 。 随 着 Web 浏览 器 技术 的 发 展 和 计算 机 性 能 的 提高 ， 今 天 的 
Javascript 已 经 正式 成 为 前 端 开发 的 支柱 性 工具 ， 其 重要 性 越 来 越 突出 。 现 代 Web 设计 中 
的 绝 大 多 数 交 互 体验 都 由 Javascript 脚本 语言 实现 。 在 标准 化 的 前 端 开发 中 ，Javascript 承 
担 了 越 来 越 重要 的 作用 。 

本 章 详细 介绍 了 Javascript 脚本 语言 的 书写 、 基 本 语法 ， 以 及 使 用 Javascript 脚本 语言 
处 理 数 据 的 详细 方法 。 除 此 之 外 ， 为 提高 程序 的 执行 效率 和 开发 效率 ， 还 专门 介绍 了 几 种 
Javascript 的 代码 流程 控制 方法 ， 包 括 分 支流 程控 制 和 迭代 流程 控制 等 。 在 本 章 的 末尾 ， 详 
细 介 绍 了 函数 这 一 重要 的 实体 的 使 用 方法 ， 帮 助 开发 者 了 解 函数 的 创建 、 参 数 的 使 用 以 及 
函数 对 象 的 基本 概念 。 在 之 后 的 章节 中 ， 开 发 者 可 以 重点 阅读 面向 对 象 编程 的 相关 知识 ， 
进一步 理解 面向 对 象 的 程序 设计 原理 ， 开 发 出 更 加 结构 化 、 模 块 化 ， 维 护 更 便捷 的 程序 。 


第 S 章 面向 对 象 的 编程 


在 之 前 的 章节 中 已 经 介绍 了 一 些 Javascript 脚本 语言 的 基本 知识 。 作 为 一 种 典型 的 面 
向 对 象 编程 的 脚本 语言 ，Javascript 具有 许多 面向 对 象 编程 的 开发 语言 特色 ， 例 如 其 将 所 有 
要 处 理 的 数据 都 视 为 对 象 (包括 函数 等 )， 同 时 也 允许 开发 者 自 定义 对 象 , 用 面向 对 象 的 方 
式 实 现 各 种 开发 功能 等 。 

面向 对 象 本 身 是 一 种 程序 设计 的 思路 ， 其 特点 是 完全 拟人 化 ， 用 现实 中 人 类 了 解 事物 
的 方式 来 研究 程序 数据 的 关系 ， 是 当代 最 流行 的 程序 设计 方式 。 使 用 面向 对 象 的 程序 设计 
方式 ， 可 以 有 效 地 提高 程序 开发 效率 ， 降 低 维 护 成 本 ， 使 程序 开发 工作 更 加 适合 团队 协作 。 

本 章 就 将 以 面向 对 象 的 方式 介绍 Javascript 脚本 语言 的 特性 ， 同 时 还 将 详细 介绍 各 种 
Javascript 支持 使 用 的 对 象 类 型 和 Javascript 高 级 应 用 , 为 开发 者 学 习 YUI 框架 提供 语言 基础 。 


5.1 了 解 面 向 对 象 


面向 对 象 的 程序 设计 Object-oriented Programming，OOP) 是 一 种 现代 的 程序 设计 模 
式 ， 同 时 也 是 一 种 程序 开发 的 方法 以 及 研究 程序 处 理 的 数据 和 整个 程序 结构 的 抽象 方式 。 
了 解 面向 对 象 的 程序 设计 原理 ， 有 助 于 开发 者 设计 和 开发 出 复 用 性 更 强 ， 维 护 更 为 便捷 的 
程序 。 


5.1.1 传统 的 面向 过 程 理念 


面向 过 程 的 程序 设计 (Procedure Oriented Programming，POP) 是 一 种 以 程序 的 执行 过 
程 为 中 心 进 行程 序 设计 的 编程 思想 ， 由 于 其 特点 是 基于 程序 执行 步骤 的 记录 ， 因 此 又 被 称 
为 面向 记录 的 程序 设计 。 

面向 过 程 的 程序 设计 的 特性 是 对 程序 的 功能 需求 进行 人 工分 析 ， 将 解决 问题 所 需要 的 
所 有 步骤 拆 分 剥离 出 来 ,然后 根据 这 些 步骤 编写 若干 函数 来 实现 每 一 个 步骤 的 功能 。 然 后 ， 
再 依次 调用 这 些 函 数 。 由 于 这 一 特性 ， 面 向 过 程 的 程序 设计 又 被 称 作 函 数 式 程序 设计 。 
面向 过 程 的 程序 设计 理念 适合 开发 一 些 依赖 明显 可 拆 分 为 若干 步骤 、 不 需要 具备 复 用 
性 的 简单 程序 ， 例 如 常见 的 批 处 理 程序 等 ， 通 过 直接 的 步骤 对 数据 进行 操作 。 在 过 去 绝 大 
多 数 脚 本 语言 都 是 面向 过 程 的 ， 通 过 函数 式 的 构件 拼装 成 一 个 整体 的 程序 ， 实 现 一 些 简单 
的 功能 。 典 型 的 面向 过 程 的 编程 语言 例如 C 语言 、Basic 语言 、Pascal 语言 等 。 在 Web 开 
发 中 ，VBScript 和 Javascript 脚本 语言 的 早期 版 本 也 都 是 面向 过 程 设计 的 。 

面向 过 程 设 计 的 程序 具有 设计 简单 、 开 发 迅速 的 特点 ， 因 此 在 一 些小 型 项 目 或 小 型 脚 
本 中 得 到 较 多 的 应 用 。 例 如 ， 编 写 一 个 网 站 登录 的 脚本 程序 ， 即 可 通过 以 下 几 个 步骤 实现 ， 
如 图 5-1 所 示 。 
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图 5-1 网 站 登录 程序 的 基本 过 程 


以 上 简单 的 程序 执行 流程 是 一 个 Web 前 端的 登录 验证 脚本 , 其 主要 用 于 实现 用 户 提交 
登录 的 账户 名 称 、 密码 之 前 的 基本 判断 , 通过 三 个 判断 步骤 预先 排除 部 分 用 户 的 错误 操作 ， 
降低 服务 器 压力 。 

这 三 个 判断 步骤 包括 判断 账户 名 称 是 否 合法 〈 例 如 是 否 只 包含 英文 字母 、 数 字 和 下 划 
线 且 不 以 数字 开头 等 )、 密 码 长 度 是 否 合法 (例如 限制 8 一 16 个 字符 )、 验 证 提问 是 否 正确 
(例如 10 以 内 的 加 法 等 , 用 于 人 机 识别 )。 当 所 有 三 个 步骤 均 验 证 成 功 后 ， 即 可 转 入 登录 程 
序 ， 如 任意 一 个 步骤 验证 失败 ， 则 输出 错误 信息 并 终止 程序 。 

在 传统 的 计算 机 程序 开发 中 ， 面 向 过 程 的 程序 设计 思想 曾经 主导 过 几乎 绝 大 多 数 程序 
的 开发 ， 通 过 大 量 函 数 的 连续 执行 实现 程序 的 步 进 功能 。 但 随 着 面向 对 象 的 程序 设计 的 发 
展 以 及 当代 计算 机 编程 语言 的 进步 , 当前 绝 大 多 数 大 型 Web 项 目 都 已 弃 用 了 这 一 整体 程序 
设计 方式 ， 仅 在 程序 的 某 一 些小 功能 模块 中 仍然 使 用 。 之 前 章节 中 编写 的 绝 大 多 数 代码 都 
是 基于 面向 过 程 的 ， 之 后 ， 将 重点 介绍 面向 对 象 编 程 的 设计 方式 。 


5.1.2 面向 对 象 方 法 的 形成 


面向 对 象 的 程序 设计 最 初 是 由 人 类 认识 事物 的 逻辑 方式 发 展 而 来 ， 其 通过 对 事物 的 分 
类 以 及 抽象 总 结 ， 来 研究 事物 的 特性 以 及 功能 。 例 如 ， 人 类 在 认识 一 个 未 知事 物 之 前 ， 会 
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本 能 地 对 该 事物 与 已 知 的 事物 相 比 较 ， 分 析 该 事物 与 已 知事 物 的 相似 处 和 不 同 处 ， 从 而 对 
事物 进行 分 类 研究 ， 了 解 事物 的 特性 。 
1. 面向 对 象 的 基本 概念 


面向 对 象 的 认 知 方式 具备 几 种 必要 元 素 ， 即 类 、 对 象 ， 以 及 类 和 对 象 的 属性 与 方法 。 
这 些 元 素 共同 构成 了 面向 对 象 的 分 析 要 素 。 

。 类 (Class) 

类 是 对 一 批 具有 共同 的 特性 和 功能 的 事物 的 抽象 总 结 ， 其 定义 了 一 个 或 多 个 事物 的 抽 
象 特征 ， 包 括 事物 的 基本 性 质 以 及 可 实现 的 各 种 功能 。 

。 子 类 (Sub Class) 

子 类 是 类 的 成 员 ， 是 类 内 部 一 部 分 具有 另 一 些 独特 共性 或 独特 功能 的 事物 的 抽象 总 
结 ， 即 是 对 类 内 部 某 一 部 分 元 素 的 二 次 抽象 。 子 类 既 具备 类 的 抽象 特征 ， 又 具备 一 些 类 不 
具备 的 独特 的 新 特征 。 

。 属性 (Property) 

属性 是 类 或 者 子 类 的 各 种 组 成 元 素 的 共同 基本 性 质 ， 其 描述 了 类 或 者 子 类 中 的 成 员 与 
其 他 事物 有 所 区 分 的 独特 形状 。 属 性 是 类 或 子 类 的 成 员 之 一 。 

。 方法 (Method) 

方法 是 类 或 者 子 类 的 各 种 组 成 元 素 的 共同 功能 。 在 使 用 类 或 子 类 时 ， 绝 大 多 数 情 况 下 
其 实 都 是 通过 使 用 类 或 子 类 的 方法 来 实现 的 。 方 法 也 是 类 或 子 类 的 成 员 之 一 。 

。 对 象 (Object) 

对 象 是 类 或 子 类 的 一 个 实例 , 是 组 成 类 或 子 类 的 具体 元 素 , 是 类 或 子 类 的 具象 化 产物 。 
对 象 也 是 类 或 子 类 的 成 员 之 一 。 

如 ， 将 所 有 的 汽车 视 为 一 个 类 别 ， 那 么 这 个 类 别 包含 的 各 种 事物 具有 一 些 共 同 的 特 
性 ， 如 具备 发 动机 、 车 轮 、 外 壳 等 ， 同 时 还 具备 一 定 的 功能 ， 如 载运 和 行驶 等 。 汽 车 这 一 
类 别 又 可 以 衍生 出 若干 子 类 别 ， 例 如 卡车 、 轿 车 等 ， 这 些 子 类 别 也 具有 其 独特 的 特性 和 功能 。 

以 面向 对 象 的 方式 来 分 析 ， 汽 车 就 是 一 个 类 ， 发 动机 、 车 轮 、 外 过 等 是 汽车 这 个 大 类 
的 属性 ， 载 运 和 行驶 就 是 汽车 这 个 大 类 的 方法 。 

卡车 、 轿 车 都 是 汽车 类 的 子 类 ， 其 除了 拥有 汽车 类 的 所 有 属性 和 方法 ， 还 具有 一 些 专 
有 的 属性 和 方法 。 例 如 ， 卡 车 具有 货 斗 这 一 专 有 属性 ， 以 及 载运 货物 的 专 有 方法 ， 轿 车 具 
有 后 备 箱 这 一 专 有 属性 ， 以 及 载运 客人 这 一 专 有 方法 。 这些 元 素 之 间 的 关系 如 图 5-2 所 示 。 
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图 5-2 ”汽车 类 和 及 其 子 类 的 成 员 关 系 
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图 5-2 中 展示 了 汽车 、 卡 车 和 轿车 等 三 个 相关 的 类 之 间 的 关系 及 其 各 自 的 成 员 构 成 ， 
其 中 ， 每 个 类 成 员 分 隔 线 之 上 的 为 类 的 属性 ， 分 隔 线 之 下 为 类 的 方法 。 

在 卡车 和 轿车 这 两 个 子 类 之 下 ， 可 以 包含 若干 实例 ， 例 如 轿车 子 类 之 下 的 桑塔纳 2000 
轿车 ， 可 以 被 视 为 是 轿车 的 一 个 实例 ， 也 就 是 一 个 具体 的 对 象 。 该 实例 继承 轿车 的 特性 和 
功能 ， 如 后 备 箱 属性 和 载运 客人 的 方法 ， 同 时 也 继承 汽车 的 所 有 特性 和 功能 ， 如 其 也 包含 
发 动机 、 车 轮 和 外 壳 等 属性 ， 以 及 载运 和 驾驶 的 方法 。 


2. 面向 对 象 的 四 种 基本 特性 


面向 对 象 的 认 知 方法 在 划分 事物 和 总 结 事物 的 特色 时 ， 会 自然 而 然 地 对 事物 进行 具体 
的 描述 。 通 常情 况 下 ， 在 进行 具体 描述 时 ， 会 通过 四 种 方式 来 对 事物 进行 归纳 总 结 ， 这 四 
种 方式 就 是 面向 对 象 的 四 种 基本 特性 ， 即 封装 性 、 聚 集 性 、 继 承 性 和 多 态 性 。 

。 封装 性 Encapsulation) 

封装 性 是 面向 对 象 的 又 一 重要 特性 ， 其 特点 在 于 强制 将 类 或 子 类 的 方法 封闭 起 来 ， 并 
定义 一 些 消息 传递 的 接口 。 这 样 ， 当 用 户 在 使 用 这 些 方法 时 ， 不 需要 了 解 方法 内 部 数据 处 
理 的 机 制 ， 只 需要 通过 消息 传递 机 制 将 所 需要 进行 的 处 理 参 数 传递 给 方法 ， 即 可 获取 到 处 
理 的 结果 。 

比如 就 汽车 类 而 言 ， 用 户 不 需要 了 解 汽车 的 各 种 部 件 如 何 相互 作用 而 使 汽车 能 够 驾驶 
和 载运 ， 只 需要 了 解 汽车 方向 盘 、 各 种 操纵 杆 以 及 刹车 等 人 机 接口 的 使 用 方法 ， 即 可 驾驶 
汽车 和 载运 货物 ， 实 现 汽车 的 各 种 功能 。 

在 一 些 功能 强大 的 面向 对 象 编程 的 开发 语言 中 ， 往 往 会 提供 一 些 关 键 字 来 限定 一 些 指 
定 的 成 员 可 以 访问 某 些 方法 ， 利 用 方法 的 接口 实现 消息 的 传递 。 例 如 ， 限 定 方法 为 公用 方 
法 、 私 有 方法 或 受 保护 的 方法 等 。Javascript 不 支持 这 一 特性 ， 但 是 可 以 通过 编码 规约 的 方 
式 强制 开发 者 遵守 某 些 特定 的 守则 。 封 装 的 作用 十 分 重要 ， 其 决定 了 代码 的 安全 性 以 及 实 
现 功 能 的 便捷 性 。 

。 聚集 性 (Aggregation) 

聚集 性 是 指 在 面向 对 象 的 分 析 过 程 中 ， 会 将 各 种 事物 聚集 归纳 为 若干 类 ， 这 些 类 之 问 
可 以 存在 峰 套 和 组 合 ， 一 个 事物 可 以 是 另 一 个 事物 的 组 成 部 分 ， 若 干事 物 也 可 以 共同 组 成 
一 个 新 的 事物 。 

聚集 性 体现 了 面向 对 象 的 各 种 事物 之 间 相 互 柑 套 和 结合 的 特性 ， 是 面向 对 象 方法 在 对 
事物 的 各 种 特性 进行 归纳 总 结 时 必然 要 体现 的 特点 。 

。 继承 性 〈Inheritance) 

继承 性 是 面向 对 象 的 基本 特性 ， 其 定义 了 子 元 素 与 父 元 素 之 间 的 关系 (例如 子 类 对 应 
父 类 、 对 象 实例 对 应 类 等 )。 具 体 表 现 为 在 面向 对 象 的 认 知 体系 中 , 任何 一 种 成 员 都 将 完整 
继承 其 父 元 素 的 所 有 特性 。 

例如 在 之 前 的 例子 中 ， 轿 车 和 卡车 等 两 个 子 类 完整 继承 汽车 的 所 有 属性 和 方法 ， 桑 塔 
纳 2000 这 一 轿车 的 实例 继承 轿车 以 及 汽车 两 个 类 的 所 有 属性 和 方法 。 同 时 ， 由 于 桑塔纳 
2000 不 是 卡车 的 实例 ， 因 此 不 继承 卡车 独 有 的 属性 和 方法 。 

当 一 个 类 或 对 象 从 其 多 个 父 类 继承 属性 和 方法 时 ， 这 种 继承 模式 被 称 作 多 重 继承 。 多 
重 继承 可 能 较为 难以 理解 和 使 用 ， 但 是 在 实际 开发 工作 中 具有 十 分 重要 的 作用 。 
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。 多 态 性 (Polymorphism) 

多 态 性 指 通过 继承 关系 定义 的 多 个 不 同 子 类 之 间 可 以 具有 不 同 甚至 完全 相反 的 特性 ， 
相对 于 其 父 类 ， 这 些 子 类 之 间 的 关系 就 属于 多 态 关 系 。 多 态 性 决定 了 一 个 大 类 之 下 的 各 种 
子 类 在 保持 父 类 的 特性 之 余 ， 可 以 具备 一 些 父 类 不 具备 的 特性 ， 从 而 对 父 类 进行 延伸 和 发 
展 ， 进 一 步 拓展 父 类 的 功能 。 

例如 在 之 前 的 例子 中 ， 轿 车 和 卡车 两 个 子 类 都 属于 汽车 这 一 大 类 的 成 员 ， 除 了 完整 继 
承 汽 车 的 所 有 属性 和 方法 外 ， 其 自身 都 具备 另外 一 个 子 类 不 具备 的 特性 ， 例 如 轿车 不 具备 
车 斗 必 性， 也 不 具备 载运 货物 的 功能 ， 卡 车 不 具备 后 备 箱 的 属性 ， 也 不 具备 载运 客人 的 功 
能 等 。 


3. 原型 链 的 概念 


以 面向 对 象 的 方式 认识 事物 ， 还 需要 了 解 一 个 重要 概念 ， 即 原型 链 。 原 型 链 是 由 面向 
对 象 的 继承 性 和 多 态 性 衍生 而 来 ， 是 指 从 类 、 子 类 到 具体 实例 之 间 构 成 的 一 个 关系 链条 。 
例如 ， 从 汽车 这 一 个 类 到 具体 的 桑塔纳 2000 轿车 的 实例 ， 之 间 就 具有 如 下 一 个 原型 链 。 
汽车 ==> 轿 车 ==> 桑 塔 纳 2000 


原型 链 体现 了 事物 的 分 类 以 及 继承 关系 ， 例 如 卡车 就 不 是 桑塔纳 2000 原型 链 中 的 元 
素 ， 因 此 桑塔纳 2000 不 会 继承 卡车 的 属性 和 方法 , 不具 备货 斗 这 一 属性 ， 也 基本 不 具备 载 
运 货物 的 功能 。 


4. 面向 对 象 的 作用 


使 用 面向 对 象 的 方式 ， 其 优势 在 于 可 以 快速 而 便捷 地 总 结 事物 的 具体 特色 ， 然 后 根据 
这 些 特色 快速 将 归纳 和 整理 事物 ， 分 类 来 进行 处 理 。 同 时 ， 随 着 分 类 整理 的 事物 越 来 越 多 ， 
建立 的 分 类 也 越 来 越 完整 ， 在 认识 一 个 新 的 事物 时 ， 可 以 根据 其 局 部 特性 快速 地 分 析 和 测 
试 这 一 事物 自身 的 功能 和 特性 。 

在 程序 开发 过 程 中 ， 面 向 对 象 的 方式 同样 非常 重要 。 尤 其 在 一 些 大 型 的 开发 项 目 中 
通过 对 项 目 各 种 功能 以 及 所 需 处 理 的 数据 类 型 和 特性 , 可 以 将 程序 的 功能 拆 分 成 若干 模块 ， 
同时 将 数据 视 为 模型 ， 对 这 些 模块 和 模型 进行 抽象 化 处 理 ， 建 立 类 ， 并 通过 类 的 成 员 关 系 
来 划分 各 种 特性 和 功能 ， 以 便 快速 解决 开发 中 遇 到 的 问题 ， 有 效 地 提高 程序 代码 的 复 用 性 
和 整体 项 目的 开发 效率 。 


5.2 面向 对 象 的 Javascript 


从 严格 意义 上 讲 ，Javascript 并 不 像 一 些 传统 、 大 型 的 面向 对 象 编程 语言 一 样 ,具有 类 、 
命名 空间 、 标 识 符 等 语言 元 素 和 特性 ， 而 且 在 Javascript 的 标准 ECMA-262 中 也 不 存在 这 
些 概念 。 但 是 ，Javascript 仍然 属于 面向 对 象 编 程 的 语言 ， 这 与 其 通过 一 个 基础 的 对 象 引用 
数据 类 型 ， 从 逻辑 上 等 价 于 其 他 编程 语言 中 的 类 ， 来 完整 地 体现 面向 对 象 的 继承 性 、 封 装 
性 、 聚 集 性 和 多 态 性 的 特点 有 极 大 地 关系 。 
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除 此 之 外 ,Javascript 还 支持 通过 工厂 函数 、 构造 函数 、 混合 方式 等 多 种 方法 来 定义 类 ， 
完整 地 实现 面向 对 象 的 功能 。 


5.2.1 Javascript 原型 对 象 


Javascript 提供 了 一 个 原生 的 引用 数据 类 型 Object， 该 类 型 用 于 创建 一 个 原型 对 象 的 实 
例 ， 并 初始 化 为 自 定 义 对 象 提 供 内 存 占 用 。 原 型 对 象 是 所 有 Javascript 引用 数据 类 型 的 基 
类 ， 其 直接 从 属于 浏览 器 的 窗口 对 象 ， 是 Javascript 面向 对 象 编程 技术 的 基础 元 素 ， 因 此 
被 称 作 Javascript 原型 对 象 。 

1. 构建 Object 原型 对 象 


在 需要 自 定义 一 个 Javascript 对 象 时 , 可 以 通过 new 运算 符 对 Object 数据 类 型 实例 化 ， 
如 下 所 示 。 

var ObjectName = new Object ( [Value] ) ; 

在 上 面 的 伪 代 码 中 ，ObjectName 关键 字 表示 自 定义 对 象 的 名 称 。Value 关键 字 为 可 选 
项 ， 表 示 该 原型 对 象 的 初始 值 ， 其 必须 为 原始 数据 类 型 的 一 个 值 ， 可 以 是 数字 、 字 符 串 、 
布尔 值 或 null 和 undefined。 需 要 注意 的 是 ， 对 象 的 引用 数据 类 型 Object 首 字母 必须 大 写 。 
例如 ， 定 义 一 个 名 为 objTest 的 自 定义 对 象 ， 并 设置 其 初始 值 为 null， 代 码 如 下 所 示 。 

var objTest = new Object ( null ) ; 

当 对 象 没有 任何 初始 值 或 者 初始 值 为 null 时 , 也 可 以 保持 Object 原型 对 象 的 括号 内 为 
空 ， 如 下 所 示 。 


Var objTest = new Object ( ); 


除了 通过 实例 化 Object 原型 对 象 外 , 开发 者 也 可 以 使 用 大 括号 赋值 的 方式 直接 创建 对 
象 ， 其 方法 如 下 所 示 。 


var ObjectName = { [Property 1 : Valuel ，Property 2 : Value2 ，.…] } :; 


在 上 面 的 伪 代 码 中 ，ObjectName 关键 字 表 示 对 象 的 名 称 ; Property 1 关键 字 表示 对 象 
第 一 个 属性 名 ; Valuel 关键 字 表 示 对 象 第 一 个 属性 值 ; Property 2 关键 字 表示 对 象 的 第 二 个 
属性 名 ; Value2 关键 字 表示 对 象 的 第 二 个 属性 值 ， 以 此 类 推 。 

如 果 需 要 在 创建 对 象 时 不 需要 定义 对 象 的 属性 ， 则 可 以 保持 对 象 大 括号 的 内 容 为 空 ， 
直接 建立 空 对 象 。 例 如 ， 建 立 之 前 的 objTest 对 象 ， 也 可 以 使 用 空 大 括号 的 方式 赋值 ， 代 码 
如 下 。 


Var objTest = {}; 


如 果 在 建立 对 象 时 需要 定义 对 象 的 属性 ， 则 可 以 将 属性 和 属性 值 写 入 到 大 括号 中 ， 属 
性 和 属性 值 之 间 需 要 以 逗号 “,” 隔 开 。 例 如 ， 建 立 一 个 objUser 的 对 象 ， 代 码 如 下 所 示 。 
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Var objUser = { name : "Sera Chain' , birthday : '1977-08-15' , gender : 


" male" } > 


Object 原型 对 象 的 存在 意义 在 于 ， 为 用 户 自 定义 对 象 提供 一 个 引用 泛 型 ， 并 作为 其 他 
所 有 引用 数据 类 型 的 基 类 ， 帮 助 开 发 者 理解 和 使 用 各 种 其 他 类 型 Javascript 原生 对 象 。 作 
为 一 种 基本 的 类 ，Object 原型 对 象 构建 了 基本 的 Javascript 类 成 员 支 持 , 其 分 为 属性 和 方法 
两 种 。 

2. Object 原型 对 象 的 属性 


Object 原型 对 象 提 供 了 两 种 基本 的 属性 ， 用 于 实现 自 定 义 对 象 的 各 种 基本 功能 ， 即 
constructor 属性 和 prototype 属性 。 

。 constructor 属性 

constructor 属性 是 一 个 引用 属性 , 其 作用 类 似 其 他 语言 中 的 指针 , 用 于 指向 基于 Object 
创建 的 各 种 自 定义 对 象 的 构造 函数 。 

。 prototype 属性 

prototype 属性 也 是 一 个 引用 属性 ， 其 用 于 对 该 对 象 的 原型 引用 。 对 于 所 有 基于 Object 
创建 的 对 象 而 言 ， 该 属性 默认 返回 对 象 的 一 个 实例 。 该 属性 最 大 的 作用 就 是 用 于 为 自 定义 
类 添加 实例 属性 ， 以 便 在 建立 其 他 类 和 对 象 时 直接 为 对 象 初始 化 属性 值 。 

需要 注意 的 是 ，prototype 属性 不 能 直接 被 Object 原型 对 象 使 用 ， 只 能 用 于 以 Object 
原型 对 象 为 基 类 的 其 他 自 定义 对 象 中 。 


3. Object 原型 对 象 的 方法 


Object 原型 对 象 提 供 的 方法 主要 用 于 对 各 种 以 其 为 基 类 衍生 而 来 的 Javascript 类 或 对 
象 进行 判断 。 或 读 取 这 些 类 或 对 象 的 初始 值 ， 如 下 所 示 。 

。 hasOwnProperty 方法 

该 方法 的 作用 是 判断 对 象 是 否 具 有 某 个 特定 的 属性 ， 其 方法 的 参数 即 为 被 判断 属性 的 
字符 串 名 称 。 其 使 用 方法 如 下 所 示 。 


ObjectName.hasOwnProperty ( Property ) ; 


在 上 面 的 伪 代 码 中 ，ObjectName 关键 字 表示 对 象 的 引用 名 称 ，Property 表示 要 判断 的 
属性 名 称 。 该 方法 将 对 类 或 对 象 的 所 有 属性 进行 枚 举 , 判断 Property 相同 的 属性 是 否 存在 ， 
如 存在 ， 返 回 逻 辑 真 ， 否 则 返回 逻辑 假 。 

。 isPrototypeOf 方法 

该 方法 的 作用 是 判断 对 象 是 否 为 另 一 个 对 象 的 原型 ， 其 由 基 类 或 基础 的 对 象 调用 ， 方 
法 的 参数 即 被 判断 的 子 对 象 的 引用 名 称 ， 其 使 用 方法 如 下 所 示 。 


ParentObjectName.isPrototypeOf ( ChildobjectName ) ; 


在 上 面 的 伪 代 码 中 ，ParentObjectName 为 原型 链 中 父 类 或 更 基础 的 对 象 的 引用 名 称 ， 
ChildObjectName 为 子 类 或 子 对 象 的 引用 名 称 。 例 如 , 在 下 面 的 代码 中 , 定义 了 一 个 原型 对 
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象 objTest， 然 后 即 通过 Object 原型 对 象 的 isPrototypeOf 方法 验证 并 输出 了 结果 ， 代 码 如 下 。 


Var objTest = new Object ( ); 
console.log ( Object.isPrototypeOf ( objTest ) ) ; // 输 出 true 


。 propertyIsEnumerable 方法 
该 方法 的 作用 是 判断 对 象 的 某 一 个 属性 是 否 可 以 被 枚 举 ， 其 方法 的 参数 为 被 判断 的 对 
象 属性 的 引用 名 称 ， 其 使 用 方法 如 下 所 示 。 


ObjectName .propertyIsEnumerable ( Property ) ; 


在 上 面 的 伪 代 码 中 ，ObjectName 关键 字 表示 对 象 的 引用 名 称 ，Property 关键 字 表示 需 
要 判断 的 属性 。 当 Property 属性 属于 ObjectName 对 象 的 成 员 ， 且 可 以 被 for...in 语句 枚 举 
时 ， 该 方法 将 返回 逻辑 真 ， 和 否则， 返回 逻辑 假 。 

在 使 用 propertyIsEnumerable() 方 法 时 需要 注意 该 方法 仅 判断 当前 对 象 自身 的 成 员 ， 不 
会 判断 该 对 象 由 父 类 继承 而 来 的 成 员 。 通 常情 况 下 ， 预 定义 的 属性 是 不 可 枚 举 的 ， 而 开发 
者 定义 的 属性 始终 是 可 枚 举 的 。 

。 toString 方法 

该 方法 的 作用 是 以 字符 串 的 方式 返回 对 象 的 值 ， 即 对 象 构造 函数 的 返回 值 或 对 象 的 类 
型 名 称 等 。 在 之 前 介绍 数据 类 型 转换 的 章节 中 已 介绍 过 使 用 该 方法 来 将 任意 类 型 的 数据 转 
换 为 字符 串 ， 在 Javascript 脚本 语言 中 ， 任 意 类 型 的 数据 或 者 对 象 都 支持 此 方法 ， 包 括 以 
原型 对 象 衍生 而 来 的 引用 类 型 数据 或 者 自 定义 对 象 。 

。 valueOf 方法 

该 方法 的 作用 与 toString() 方 法 类 似 ， 其 作用 是 返回 对 象 的 初始 值 ， 其 区 别 在 于 ， 
toString() 方 法 返回 的 是 一 个 字符 串 类 型 的 初始 值 ， 而 valueOf0) 方 法 返回 的 则 是 对 象 自身 的 
实例 。 也 就 是 说 ， 当 且 仅 当 对 象 的 类 型 为 字符 串 时 ，toString0 方 法 和 valueOf0 方 法 返回 的 
值 是 相同 的 ， 否 则 valueOf0) 方 法 返回 的 值 的 类 型 更 加 丰富 。 下 面 列举 了 不 同类 型 的 数据 使 
用 valueOf0 方 法 返回 的 结果 ， 如 表 5-1 所 示 。 


表 5-1 valueOf0 方 法 的 返回 值 


对 象 类 型 返回 值 

字符 串 字符 串 

布尔 值 布尔 值 

数字 数字 

Object 原型 对 象 ”对 象 本 身 

数组 数组 实例 

日 期 从 标准 时 1970 年 1 月 1 日 午夜 0 时 开始 至 日 期 储存 的 时 间 之 间 的 毫秒 间隔 数字 
函数 函数 本 身 


正则 表达 式 正则 表达 式 对 象 本 身 
5.2.2 工厂 函数 


工厂 函数 顾名思义 ， 是 以 类 似 工 三 批量 生产 的 方式 创建 类 或 对 象 的 一 种 函数 。 工 厂 函 
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数 最 大 的 特点 就 是 批量 化 封装 类 或 对 象 的 实例 创建 过 程 ,因此 这 一 环节 又 被 称 作 工厂 封装 。 
使 用 工厂 函数 ， 可 以 快速 地 建立 类 和 对 象 ， 并 统一 类 和 对 象 所 拥有 的 属性 和 方法 。 


1. 基本 工厂 函数 封装 


基本 的 工厂 函数 封装 ， 可 以 建立 一 个 临时 的 原型 对 象 ， 然 后 定义 原型 对 象 的 自 定 义 属 
性 和 方法 ， 最 终 将 临时 原型 对 象 作为 工厂 函数 的 返回 值 输出 ， 供 实例 化 的 语句 引用 。 典 型 
的 工厂 封装 方式 如 下 所 示 。 


function Factory () { 
Var TempObject = new Object () ; 
TempObject.Property = Value ; 
TempObject.Method = function () { 

Statements ; 

}; 
return TempObject ; 

} 


在 上 面 的 伪 代 码 中 ，Factory 关键 字 表示 工厂 函数 的 名 称 ; TempObject 关键 字 表示 工 
厂 函 数 封装 的 临时 对 象 ,， Property 关键 字 表 示 该 临时 对 象 的 属性 ，Value 关键 字 表示 该 临时 
对 象 的 初始 属性 值 ，Method 关键 字 表示 该 临时 对 象 的 方法 ，Statements 关键 字 表示 该 临时 
对 象 方法 的 语句 。 使 用 工厂 封装 方式 创建 实例 的 方法 如 下 。 


var Instance = Factory ( ) : 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表 示 实 例 的 名 称 ，Factory 关键 字 表 示 对 应 工厂 函 
数 的 名 称 。 由 以 上 两 段 伪 代 码 可 以 看 出 ， 所 谓 工厂 函数 封装 的 方式 ， 实 际 上 就 是 编写 一 个 
函数 ， 然 后 在 函数 中 预 置 创建 原型 对 象 的 代码 ， 并 定义 原型 对 象 的 属性 和 方法 ， 最 后 将 原 
型 对 象 作为 函数 的 返回 值 输出 。 在 调用 工厂 函数 时 ， 实 际 上 就 是 直接 执行 工厂 函数 内 创建 
原型 对 象 的 代码 ， 生 成 一 个 新 的 原型 对 象 。 使 用 工厂 函数 封装 创建 一 个 新 闻 条 目的 实例 代 
码 如 下 。 


function CreateNews ( ) { 
var objTempNews = new Object ( ) : 
obJjTempNews .title = "Hello World!' ; 
objTempNews .content = "Hello ，This is Sera's first Instance.' ; 
obJjTempNews .showTitle = function ( ) { 
alert ( this-title ) ; 
} 5; 
objTempNews.showContent = function ( ) { 
alert ( this.content ) ; 
} 5 
return objTempNews ; 
} 


Var objNews = CreateNews (); 


180 高 效 Web 前 端 开发 之 路 一 一 YUI 3.15 


objNews .showTitle ( ) ; // 弹 出 "Hello World! "消息 
objNews.showContent ( ) ; // 弹 出 "Hello ， This is Sera's first Instance." 
消息 


原始 的 工厂 封装 适合 快速 建立 大 批量 一 模 一 样 的 实例 。 但 是 其 往往 无 法 创建 多 样 性 的 
实例 ， 因 此 在 实际 开发 中 应 用 有 限 。 

2. 动态 创建 工厂 实例 

在 实际 开发 中 ， 开 发 者 可 以 通过 工厂 函数 的 参数 ， 为 创建 的 实例 定义 完全 不 同 的 实例 
属性 ， 从 而 实现 创建 实例 的 多 样 性 ， 实 现 动态 地 创建 工厂 实例 。 在 下 面 的 代码 中 ， 就 对 以 
上 创建 新 闻 的 工厂 函数 进行 了 修改 ， 使 开发 者 在 调用 工厂 函数 时 能 够 自 定义 新 闻 的 标题 和 
内 容 ， 增 强 工 厂 函 数 的 适应 性 ， 代 码 如 下 。 


function CreateNews ( title , content ) { 

Var objTempNews = new Object ( ); 

objTempNews.title = title ; 

objTempNews.content = content ; 
objTempNews .showTitle = function ( ) { 
alert ( this.title ) ; 

}; 

objTempNews.showContent = function ( ) { 
alert ( this.content ) ; 

}; 

return objTempNews ; 


} 

var objNewsl = CreateNews ( 'Hello World!' , 'Hello , This is Sera's first 
Instance-' ) 

var objNews2 = CreateNews ( 'Hello World2!' , 'Hello ，This is Sera's second 


Instance-' ) 


在 上 面 的 代码 中 ， 就 通过 工厂 函数 的 参数 为 定义 的 临时 原型 对 象 添加 属性 ， 然 后 ， 在 
调用 工厂 函数 时 即 可 通过 参数 快速 将 属性 的 值 传递 给 临时 对 象 ， 并 获得 多 样 化 的 实例 。 


5.2.3 ”构造 函数 


构造 函数 也 是 一 种 特殊 的 函数 ， 其 作为 类 的 主体 存在 ， 用 于 实现 类 的 功能 。 在 绝 大 多 
数 编程 语言 中 ， 构 造 函 数 都 是 类 不 可 缺少 的 组 成 部 分 。 在 Javascript 中 ， 通 过 使 用 构造 函 
数 ， 可 以 快速 地 构建 对 象 ， 并 获取 对 象 的 实例 。 


1. 创建 构造 函数 


Javascript 脚本 语言 可 以 通过 以 类 或 对 象 的 名 称 作为 函数 名 称 的 方式 创建 构造 函数 , 然 
后 再 通过 一 些 变通 的 方式 来 实现 类 或 对 象 的 自 定 义 。 使 用 构造 函数 创建 类 或 者 对 象 的 方式 
如 下 。 
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function Constructor ( [Arguments] ) { 


在 上 面 的 伪 代 码 中 ，Constructor 关键 字 是 构造 函数 的 名 称 ， 通 常情 况 下 与 类 或 对 象 同 
名 ; Arguments 关键 字 表示 构造 函数 的 参数 ， 根 据 实际 类 或 对 象 的 需要 ， 其 可 以 为 空 ， 或 
为 一 个 变量 和 对 象 ， 也 可 以 是 若干 变量 或 对 象 组 成 的 集合 ， 以 逗号 “,” 分 隔 。 

构造 函数 通常 没有 返回 值 ， 实 质 上 也 不 需要 返回 任何 数据 。 通 常情 况 下 构造 函数 的 作 
用 就 是 初始 化 一 个 对 象 ， 并 初始 化 类 或 对 象 的 各 种 成 员 〈 如 属性 、 方 法 等 )。 在 下 面 的 代码 
中 ， 就 定义 了 一 个 用 于 描述 用 户 数据 的 构造 函数 ， 构 建 了 用 户 的 类 ， 如 下 所 示 。 

function User ( strUserName , strGender ) { 


} 


在 上 面 的 代码 中 ， 定 义 了 一 个 基本 的 用 户 类 构造 函数 ， 并 为 其 添加 了 两 个 参数 ， 即 
strUserName 和 strGender， 用 于 描述 用 户 的 姓名 和 性 别 。 如 果 需 要 为 用 户 定义 属性 和 方法 ， 
例如 分 别 定义 两 个 属性 一 一 姓名 和 性 别 ， 再 定义 两 个 方法 包括 分 别 输 出 这 两 个 属性 的 值 ， 
则 可 以 使 用 this 关键 字 在 构造 函数 内 部 引用 构造 函数 自身 ， 实 现 属性 的 定义 ， 代 码 如 下 。 

function User ( strUserName , strGender ) { 

this.name = strUserName ; 

this.gender = strGender ; 

this.showUserName = function ( ) { 
console.log ( this.name ) ; 

} 

this.showUserGender = function ( ) { 
console.log ( this.gender ) ; 

3 

} 


然后 ， 即 可 通过 new 运算 符 调用 这 一 构造 函数 ,创建 用 户 的 实例 。 例如， 在 下 面 的 代 
人 码 中 就 创建 了 名 为 Sera Chain 的 实例 。 


var objUserSeraChain = new User ( 'Sera Chain' ，'male' ) ; 


objUserSeraChain 对 象 实例 由 User 类 产生 ， 因 此 基于 面向 对 象 的 继承 性 原则 ， 该 对 象 
会 完全 继承 User 类 的 属性 和 方法 。 例 如 ， 输 出 用 户 Sera Chain 的 性 别 ， 即 可 调用 User 
类 的 showUserGender 方法 ， 如 下 所 示 。 


objUserSeraChain.showUserGender ( ) ; // 输 出 male 


以 上 就 是 通过 创建 构造 函数 ， 并 在 构造 函数 中 定义 属性 和 方法 来 建立 对 象 实例 的 具体 
方式 。 这 种 方式 实际 上 是 存在 一 些 问 题 的 , 以 下 就 详细 曾 述 这 种 方法 在 实际 开发 中 的 次 端 。 
构造 函数 的 特性 就 是 每 建立 一 个 实例 都 必须 完整 地 执行 其 内 部 所 有 的 代码 。 由 于 每 一 
次 将 构造 函数 内 部 的 函数 定义 为 方法 时 ， 都 必须 在 内 存 中 为 该 方法 划分 空间 ， 并 完整 地 执 
行 一 次 该 方法 的 代码 ， 因 此 ， 调 用 这 种 构造 函数 的 次 数 越 多 , 在 内 存 中 占用 的 空间 也 越 大 ， 
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由 于 Javascript 并 没有 一 个 良好 的 垃圾 回收 机 制 ， 因 此 这 种 方式 会 消耗 较 多 的 资源 。 

在 定义 一 些 简 单 的 类 时 也 许 不 会 明显 地 表现 出 来 , 但 是 在 一 些 大 型 的 Web 项 目 中 ,如 
果 每 一 个 构造 函数 都 以 这 种 方式 定义 ， 那 么 消耗 的 内 存 就 十 分 可 观 ， 会 严重 影响 客户 端 
Web 浏览 器 的 执行 效率 。 解 决 这 个 问题 的 方法 就 是 使 用 原型 定义 属性 和 方法 的 方式 。 

2. 使 用 原型 定义 属性 和 方法 


在 5.2.1 中 已 经 介绍 过 原型 对 象 (Object) 的 一 个 特殊 属性 prototype， 其 作用 是 为 对 象 
提供 原型 的 引用 。 使 用 这 一 属性 ， 开 发 者 可 以 方便 地 在 构造 函数 外 部 定义 其 原型 属性 和 原 
型 方法 ， 从 而 避免 包含 代码 过 多 的 构造 函数 创建 实例 时 造成 的 内 存 占 用 问题 。 例 如 ， 在 下 
面 的 代码 中 ， 就 通过 这 一 方法 定义 了 一 个 用 户 的 类 ， 以 及 该 用 户 类 的 各 种 基本 原型 属性 。 

function User ( ) { 

} 

User.prototype.name = 'Sera Chain' ; 

User.prototype.birthday = '1977-08-15' ; 

User.prototype.gender = 'male' ; 


User.prototype.showUserName = function ( ) { 
console.log ( this.name ) ; 

}; 

User.prototype.showUserBirthday = function ( ) { 
console.log ( this.birthday ) ; 

} 

User.prototype.showUserGender = function ( ) { 
console.log ( this.birthday ) ; 

} 


var objUserl new User ( ) : 


var objUser2 new User ( ); 


在 上 面 的 代码 中 ， 就 定义 了 空 的 构造 函数 User， 其 中 并 未 包含 任何 代码 ， 接 下 来 ， 通 
过 prototype 属性 为 User 类 定义 了 三 个 原型 属性 和 三 个 原型 方法 。 在 实例 化 objUserl 和 
objUser2 后 ， 这 两 个 新 的 实例 将 自动 继承 这 些 原型 属性 和 原型 方法 。 

这 种 空 构造 函数 原型 属性 和 原型 方法 的 定义 可 以 避免 构造 函数 内 代码 多 次 被 执行 而 
造成 的 效率 低下 问题 ， 但 是 其 同样 也 产生 了 一 个 新 的 问题 : 由 于 构造 函数 保护 的 问题 ， 这 
种 空 构造 函数 是 不 能 给 其 原型 属性 和 原型 方法 传递 参数 的 ， 和 基本 工厂 函数 封装 类 似 ， 这 
样 定义 出 来 的 实例 都 是 完全 一 样 的 。 

因此 ， 这 种 原型 定义 属性 方法 的 空 构造 函数 方式 也 并 不 能 完美 地 解决 效率 和 功能 之 间 
的 平衡 问题 。 最 终 ， 无 论 单纯 的 工厂 函数 还 是 构造 函数 ， 都 回 到 了 同一 个 起 点 。 当 然 ， 无 
论 工厂 函数 还 是 构造 函数 ， 小 范围 的 应 用 都 是 完全 可 以 满足 一 些 简 单 定 义 类 的 需求 的 。 但 
是 最 终 实现 完美 地 定义 类 ， 还 需要 用 更 加 合理 的 方法 来 解决 以 上 这 些 问 题 。 


3. 混合 构造 函数 /原型 方式 
混合 的 构造 函数 /原型 方式 ， 其 本 质 就 是 在 构造 函数 内 部 定义 类 和 对 象 的 属性 ， 然 后 再 
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以 原型 的 方式 定义 类 和 对 象 的 方法 。 这 种 方式 既 能 够 通过 构造 函数 来 获取 参数 ， 实 现 属性 
的 多 样 化 ， 又 可 以 避免 大 量 方法 在 构造 函数 内 部 多 次 执行 造成 的 资源 浪费 ， 是 一 种 较为 便 
捷 地 解决 工厂 函数 与 构造 函数 适用 性 的 方式 。 

例如 ， 之 前 定义 用 户 类 的 构造 函数 ， 实 际 上 可 以 用 以 下 的 方式 书写 ， 代 码 如 下 。 


function User ( strUserName , strGender ) { 
this.name = strUserName ; 
this.gender = strGender ; 

} 

User.prototype.showUserName = function ( ) { 
console.log ( this.name ) ; 

} 

User.prototype.showUserGender = function ( ) { 
console.log ( this.gender ) ; 

} 


var objUserl = new User ( 'Sera Chain' ，'male' ) ; 


var objUser2 = new User ( 'Kazaff Feng' , 'female' ) ; 
objUserl.showUserName ( ) ; // 输 出 Sera Chain ; 
objUser2.showUserGender ( ) ; // 输 出 female ; 


在 上 面 的 代码 中 ， 由 于 showUserName() 和 showUserGender() 两 个 方法 都 仅仅 创建 了 一 
次 ， 因 此 不 存在 内 存 上 的 浪费 ， 同 时 ， 由 于 User 类 的 属性 均 在 构造 函数 内 部 定义 ， 因 此 也 
可 以 近乎 完美 地 通过 构造 函数 的 参数 来 传递 实际 的 属性 值 ， 使 该 构造 函数 能 够 符合 多 态 性 
的 需求 。 

混合 构造 函数 /原型 方式 是 ECMAScript 中 最 主要 的 定义 构造 函数 的 方式 ， 也 是 绝 大 多 
数 开发 者 推荐 使 用 的 方式 。 


5.2.4 ”类 和 对 象 的 成 员 


在 之 前 小 节 中 已 经 介绍 过 通过 工厂 函数 和 构造 函数 等 方法 来 创建 一 个 类 ， 并 简单 地 定 
义 类 的 属性 和 方法 。 属 性 和 方法 都 属于 类 的 自 有 成 员 ， 如 之 前 介绍 的 一 样 ， 属 性 描述 类 的 
性 质 ， 方 法 定义 类 的 功能 。 在 实际 的 使 用 中 ，Javascript 和 绝 大 多 数 编程 语言 一 样 ， 又 将 这 
两 种 成 员 分 为 两 大 类 ， 即 应 用 于 类 自身 的 静态 成 员 ， 以 及 用 于 实例 的 实例 成 员 。 


1. 静态 成 员 和 实例 成 员 


静态 成 员 是 指 用 于 描述 类 或 对 象 自身 性 状 的 成 员 ， 其 包括 静态 属性 和 静态 方法 两 种 。 
静态 成 员 仅 能 用 于 类 和 对 象 自身 ， 无 法 被 类 和 对 象 的 实例 继承 。 

实例 成 员 顾名思义 就 是 用 于 描述 类 和 对 象 具体 的 某 一 个 实例 的 成 员 ， 其 包括 实例 属性 
和 实例 方法 两 种 。 这 两 种 成 员 无 法 用 于 类 和 对 象 自身 ， 只 能 在 实例 化 类 和 对 象 之 后 ， 为 具 
体 实 例 使 用 。 

举 个 简单 的 例子 ， 例 如 ， 在 生物 学 领域 的 猫 科 动物 作为 一 个 类 ， 那 么 会 具有 一 系列 的 
静态 属性 和 实例 属性 ， 如 图 5-3 所 示 。 
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在 图 5-3 中 ， 虚 线 以 上 的 属性 即 猫 科 动物 类 的 静态 属 
性 ， 很 显然 ， 这 些 属性 仅 用 于 描述 整个 猫 科 动物 类 的 性 状 ， 
而 并 不 适合 描述 猫 科 动物 中 的 某 一 个 具体 实例 。 例 如 ， 出 
现时 间 这 一 属性 是 整个 猫 科 动物 的 特性 ， 而 某 个 具体 实例 
例如 邻居 家 的 土 猫咪 咪 ， 其 出 生 在 一 年 以 前 ， 显 然 不 会 与 
出 现时 间 的 三 千 万 年 前 相符 。 同 理 ， 猫 科 动物 的 分 布 区 域 
十 分 广泛 ， 涵 盖 目 前 几乎 所 有 人 类 涉及 的 区 域 ， 但 是 邻居 
家 的 土 猫咪 咪 ， 则 只 活动 在 邻居 家 附近 的 几乎 方 公里 范 
围 内 。 

虚线 以 下 的 属性 则 是 猫 科 动物 类 的 实例 属性 ， 这 些 属 
性 被 应 用 到 所 有 猫 科 动物 下 属 的 任意 子 类 、 实 例 中 ， 也 就 
是 说 ， 邻 居家 的 土 猫咪 味 ， 就 都 具有 这 些 实例 属性 的 特点 。 
同时 ， 实 例 属性 也 通常 无 法 描述 整个 类 的 性 状 ， 例 如 ， 邻 


高 效 Web 前 端 开发 之 路 一 一 YUI 3.15 


猫 科 动 物 


界 : 动物 界 
拉丁 文 名 称 : Felidae 

中 文 名 称 : 猫 科 

出 现时 间 : 三 千 万 年 前 的 渐 
分 布 区 域 : 亚洲 、 欧洲、 和 和 


图 5-3 ” 猫 科 动 物 的 属性 


居家 的 土 猫咪 咪 的 毛 是 土 黄色 ， 而 猫 科 动物 的 毛 则 各 种 色彩 都 有 。 
以 上 这 个 例子 就 很 清楚 地 展示 了 静态 成 员 和 实例 成 员 之 间 的 区 别 。 静 态 方法 与 实例 方 
法 的 区 分 方式 和 静态 属性 与 实例 属性 的 关系 较为 类 似 ， 在 此 不 再 歼 述 。 


2. 使 用 静态 属性 


在 Javascript 脚本 语言 中 ， 定 义 静态 属性 和 实例 属性 需要 使 用 不 同 的 方法 。 在 定义 更 
态 属 性 时 ， 可 直接 使 用 类 或 对 象 的 名 称 加 属性 名 的 方法 ， 快 速 进行 静态 属性 的 创建 ， 如 下 


所 示 。 


Class.Attribute = Value ; 


在 上 面 的 伪 代 码 中 ，Class 关键 字 表 示 类 或 对 象 的 名 称 ; Attribute 关键 字 表示 静态 属性 


的 名 称 : Value 关键 字 表示 静态 属性 的 值 。 


例如 ， 定 义 一 个 名 为 Phablet 的 类 ， 用 于 描述 时 下 流行 的 平板 手机 ， 那 么 就 可 以 通过 
定义 其 最 大 屏幕 尺寸 和 最 小 屏幕 尺寸 两 种 静态 属性 来 描述 整个 类 的 特性 ， 如 下 所 示 。 


function Phablet ( ) { 
} 


Phablet .maxScreenSize 


| | 


Phablet.minScreenSize 


3. 使 用 实例 属性 


在 定义 实例 属性 时 ， 通 常 需要 在 类 的 构造 函数 或 工厂 函数 内 部 以 this 关键 字 定义 其 实 
例 的 具体 属性 , 或 在 构造 函数 和 工厂 函数 之 外 由 原型 对 象 的 prototype 属性 来 继承 产生 ，: 


方法 如 下 所 示 。 


function Class 《 》 { 
this.Attributel = Valuel ; 
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} 
Class.prototype.Attribute2 = Value2 ; 


在 上 面 的 伪 代 码 中 ， 就 采用 了 两 种 方式 来 为 类 定义 实例 属性 。 其 中 ，Class 关键 字 表 示 
类 的 名 称 ; Attributel 关键 字 表示 在 构造 函数 内 部 定义 的 实例 属性 名 称 ; Valuel 关键 字 表示 
在 构造 函数 内 部 定义 的 实例 属性 值 ; Attribute2 关键 字 表示 在 构造 函数 外 部 定义 的 实例 属性 
名 称 ; Value2 关键 字 表 示 在 构造 函数 外 部 定义 的 实例 属性 值 。 
以 上 两 种 定义 实例 属性 的 方式 , 其 定义 的 属性 在 本 质 上 没有 区 别 。 但 是 在 实际 应 用 中 ， 
在 构造 函数 内 部 定义 属性 ， 可 以 便捷 地 通过 构造 函数 的 参数 实现 属性 值 数据 的 传递 ， 增 强 
实例 的 多 样 性 。 

例如 ， 在 下 面 的 代码 中 ， 就 定义 了 一 个 图 书 的 类 ， 并 为 图 书 定义 了 儿 个 实例 属性 。 


function Books ( strTitle , strAuthor , intISBN ){ 
this.title = StrTitle ; 
this.author = strAuthor ; 
this.isbn = intISBN ; 


} 
Books .prototype.press =' 清 华 大 学 出 版 社 ' ， 


在 上 面 的 代码 中 ， 就 分 别 为 Books 类 定义 了 四 个 实例 属性 ， 其 中 前 三 个 属性 依赖 于 构 
造 函 数 的 参数 传递 ， 因 此 采用 了 this 关键 字 来 定义 ， 第 四 个 属性 是 默认 的 统一 实例 属性 ， 
因此 就 采用 了 外 部 定义 以 减少 构造 实例 时 的 资源 消耗 。 使 用 这 一 构造 函数 创建 实例 时 ， 即 
可 应 用 这 四 种 实例 属性 ， 代 码 如 下 。 


Var bookl = new Book ( 'AutoCAD 2013 中 文 版 标准 教程 ' ， ' 张 东平 、 温 玲 娟 ' ， 
9787302322412 } > 


在 创建 该 实例 后 ， 即 可 使 用 “实例 名 + 属性 名 ”的 方式 对 这 些 属性 进行 读 取 或 编辑 ， 
操作 类 的 实例 属性 。 


4. 验证 静态 属性 和 实例 属性 


静态 属性 和 实例 属性 的 使 用 有 很 大 的 区 别 ， 完 全 不 能 混淆 。 例 如 ， 静 态 属性 只 能 通过 
类 名 来 读 写 , 实例 属性 只 能 通过 实例 名 来 读 写 。 例如 , 在 下 面 的 代码 中 , 就 同时 为 一 个 User 
类 定义 了 静态 属性 和 实例 属性 。 


function User ( strUserName , strGender ) { 
this.name = strUserName ; 
this.gender = strGender ; 

} 

User.type = "System User' ; 


User.corp = 'Tsinghua University Press' ; 

在 上 面 的 代码 中 , 在 User0 构 造 函 数 内 部 通过 this 关键 字 定 义 的 两 个 属性 是 User 类 的 
实例 属性 ， 而 在 构造 函数 之 外 定义 的 type、corp 两 个 属性 则 是 User 类 的 静态 属性 。 通 过 几 
段 简单 的 测试 代码 即 可 验证 实例 属性 和 静态 属性 的 区 别 ， 如 下 所 示 。 
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Var objUserl = new User ( 'Sera Chain' ，'male' ) 7 

Var objUser2 = new User ( 'Kazaff Feng' ， "female' ) ; 
objUserl.name ) ; // 输 出 Sera Chain 
objUser2.gender ) ; // 输 出 female 
objUserl.type ) ; // 输 出 undefined 
objUser2.corp ) ; // 输 出 undefined 

User.name ) ; // 输 出 undefined 

User.gender ) ; // 输 出 undefined 

User.type ) ; // 输 出 System User 

User.corp ) ; // 输 出 Tsinghua University Press 


console.log 
console.log 
console.1log 
console.1log 
console.1log 
console.1log 


console.1log 


console.1log 


在 上 面 的 代码 中 ， 由 于 name、gender 两 个 属性 为 实例 属性 ， 因 此 在 将 User 类 实例 化 
为 objUserl 和 objUser2 之 后 , 可 以 通过 这 两 个 实例 来 读 取 到 其 属性 值 ; 但 由 于 type 和 corp 
两 个 属性 为 静态 属性 ， 因 此 在 通过 objUserl 和 objUser2 两 个 实例 读 取 type 和 corp 值 时 ， 
获取 的 值 为 undefined。 

同 理 ， 由 于 name 和 gender 两 个 实例 属性 只 能 为 User 类 的 实例 使 用 ， 因 此 当 直 接 以 
User 类 读 取 这 两 个 属性 时 ， 获 取 的 值 只 能 是 undefined; type 和 corp 两 个 属性 是 静态 属性 ， 
因此 通过 User 类 读 取 这 两 个 属性 ， 就 可 以 返回 正确 的 属性 值 。 

在 实际 的 开发 中 ， 静 态 属性 和 实例 属性 各 自 具 有 其 必要 的 作用 ， 因 此 具体 定义 一 种 属 
性 为 静态 属性 还 是 实例 属性 ， 需 要 根据 实际 情况 具体 分 析 。 

通常 情况 下 ， 如 果 某 一 种 特性 主要 用 于 描述 整个 类 的 统一 性 状 ， 为 保障 该 特性 不 会 被 
轻易 地 变动 和 修改 ， 可 将 其 定义 为 静态 属性 ， 而 如 果 某 一 种 特性 用 于 描述 一 个 类 下 每 个 具 
体 实 例 的 不 同性 状 ， 为 保障 每 个 实例 的 多 样 性 ， 应 将 其 定义 为 实例 属性 。 


5. 使 用 静态 方法 


静态 方法 和 实例 方法 的 关系 与 静态 属性 和 实例 属性 的 关系 类 似 ， 其 定义 的 方式 也 十 分 
类 似 。 为 类 定义 静态 方法 ， 其 方式 就 是 通过 类 名 加 方法 名 的 方式 先 建立 静态 方法 ， 然 后 再 
将 一 个 匿名 函数 作为 值 赋予 该 方法 ， 代 码 如 下 。 


Class.Method = function () { 
Statements ; 


在 上 面 的 伪 代 码 中 ，Class 关键 字 表示 类 的 名 称 ;，Method 关键 字 表示 方法 的 名 称 ; 
Statements 关键 字 表 示 方 法 中 的 语句 。 

例如 ， 为 之 前 定义 的 平板 手机 类 添加 读 取 其 最 大 屏幕 尺寸 和 最 小 屏幕 尺寸 的 方法 ， 代 
码 如 下 。 

function Phablet () { 


Phablet.maxScreenSize = 7 


Phablet.minScreenSize = 5.5 ; 


Phablet.getMaxScreenSize = function () { 
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return this.maxScreenSize ; 

} 

Phablet .getMinScreenSize = function () { 
return this.minScreenSize ; 


} 

需要 注意 的 是 ， 在 静态 方法 中 引用 this 关键 字 ， 其 意义 与 在 实例 属性 中 的 this 关键 字 
是 完全 不 同 的 。 在 定义 实例 属性 时 ，this 关键 字 指 代 的 是 实例 自身 ， 而 在 静态 方法 中 使 用 
的 this 关键 字 则 指 代 整个 类 本 体 。 

使 用 以 下 两 行 代码 ， 即 可 方便 地 调用 Phablet 类 的 静态 方法 ， 输 出 其 屏幕 最 小 值 和 最 
大 值 ， 代 码 如 下 。 


console.1og ( Phablet.getMaxScreenSize ( ) ) ; // 输 出 数字 7 
console.1og ( Phablet.getMinScreenSize ( ) ) ; // 输 出 数字 5.5 


6. 使 用 实例 方法 


实例 方法 的 使 用 方式 与 实例 属性 类 似 ， 都 可 以 通过 构造 函数 或 工厂 函数 内 部 的 this 关 
键 字 来 定义 ， 也 可 以 在 外 部 以 类 的 prototype 属性 来 定义 ， 如 下 所 示 。 

function Class ( ) 1{ 

this.Methodl = function ( ) { 

Statementsl ; 

} 
} 
Class.prototype.Method2 = function ( ) { 

Statements2 ; 
} 


在 上 面 的 伪 代 码 中 ，Class 关键 字 表 示 类 的 名 称 ; Method1 关键 字 表示 构造 函数 内 部 的 
实例 方法 名 ; Statements1 关键 字 表 示 构 造 函 数 内 部 的 实例 方法 语句 ，Method2 关键 字 表示 
构造 函数 外 部 的 实例 方法 名 ; Statements2 关键 字 表示 构造 函数 外 部 的 实例 方法 语句 。 

在 之 前 介绍 混合 构造 函数 /原型 方式 定义 类 时 ， 已 经 介绍 过 实例 方法 的 定义 和 使 用 , 在 
此 不 再 歼 述 。 


5.2.5 ”对 象 的 作用 域 

对 象 的 作用 域 是 一 种 特殊 的 面向 对 象 编程 的 概念 ,其 意义 在 于 将 实体 (例如 类 、 对象、 
函数 、 属 性 、 方 法 、 变 量 ) 进行 分 类 ， 对 外 部 代码 访问 这 些 实体 做 一 些 限定 。 

1 作用 域 的 意义 


在 一 些小 型 开发 项 目 中 ， 开 发 者 只 需要 定义 少量 的 实体 〈 例 如 类 、 对 象 、 函 数 、 属 性 
和 方法 ), 在 这 种 情况 下 , 开发 者 往往 无 须 考 虑 这 些 实体 之 间 命 名 冲突 以 及 相互 嵌 套 导致 的 
各 种 错误 。 
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但 是 ， 在 大 型 的 开发 项 目 中 ， 如 果 将 这 些 实体 全 部 都 放置 在 全 局 作用 域 中 ， 则 开发 团 
队 的 开发 者 们 很 难 协调 大 量 实体 的 命名 ， 尤 其 在 统一 了 实体 的 命名 法 则 后 ， 不 同 的 实体 很 
容易 会 被 几 个 开发 者 命名 为 相同 的 名 称 ， 导 致命 名 重复 和 错误 的 重新 实例 化 和 函数 方法 
重 构 。 

基于 以 上 理由 ， 绝 大 多 数 的 面向 对 象 的 编程 语言 都 引入 了 一 个 特殊 的 概念 ， 即 对 象 的 
作用 域 。 在 计算 机 软件 开发 领域 ， 作 用 域 这 一 概念 类 似 数学 中 的 函数 定义 域 ， 其 意义 在 于 
为 各 种 类 、 对 象 、 函 数 、 属 性 、 方 法 、 变 量 等 实体 定义 了 一 个 适用 的 范围 ， 防 止 开发 者 混 
乱 地 引用 这 些 实体 ， 尤 其 在 对 这 些 元 素 进行 修改 操作 时 不 适时 地 重 构 或 重 定义 这 些 元 素 ， 
从 而 影响 其 他 代码 的 执行 。 

通常 情况 下 ， 在 一 些 大 型 的 面向 对 象 开 发 语言 中 ， 作 用 域 都 是 通过 关键 字 来 划分 的 
例如 将 各 种 实体 定义 为 公共 作用 域 、 私 有 作用 域 两 种 类 型 。 通 过 public 关键 字 将 实体 的 作 
用 域 定义 为 公共 ， 人 允许 其 被 任意 位 置 的 代码 访问 ; 通过 private 关键 字 将 实体 的 作用 域 定义 
为 私有 ， 限 制 其 只 能 在 其 所 属 的 类 或 对 象 内 部 被 代码 访问 等 。 


2. Javascript 中 的 作用 域 


由 于 Javascript 是 ECMAScript 脚本 语言 的 一 个 标准 子 集 ， 因 此 其 继承 了 ECMAScript 
脚本 语言 的 完全 公共 作用 域 的 特点 ， 与 其 他 面向 对 象 的 编程 语言 有 较 大 的 区 别 。 

Javascript 不 提供 public、private 等 关键 字 以 限定 实体 的 作用 域 ， 并 且 强 制 开 放 实 体 的 
作用 域 为 公有 ， 也 就 是 说 ， 开 发 者 定义 的 任何 实体 ， 其 作用 域 都 是 公共 的 。 在 这 种 状况 下 ， 
开发 者 在 代码 中 直接 编写 的 函数 、 声 明 的 变量 ， 其 作用 域 都 会 被 视 为 全 局 范围 ， 即 可 被 任 
意 位 置 的 代码 调用 。 

例如 ， 在 以 下 的 代码 中 声明 了 一 个 变量 ， 创 建 了 一 个 对 象 以 及 建立 了 一 个 函数 ， 代 码 
如 下 。 


var intTest 0; 
null ; 


function Test ( ) { 


var objTest 


return null ; 


} 


在 上 面 的 代码 中 ， 三 个 实体 的 作用 域 都 是 全 局 的 ， 因 此 在 任意 位 置 的 代码 都 可 以 对 其 
进行 调用 。 同 理 ， 在 定义 类 和 对 象 时 ， 为 类 和 对 象 建立 的 任何 属性 、 方 法 、 子 类 、 实 例 等 
都 会 被 强制 定义 为 公共 作用 域 ， 在 全 局 任意 位 置 均 可 被 调用 。 例 如 ， 创 建 一 个 名 为 Book 
的 类 ， 为 其 定义 属性 和 方法 ， 代 码 如 下 所 示 。 


function Book ( strTitle , strAuthor ) { 
this.title = strTitle ; 
this.author = strAuthor ; 
} 
Book.publisher = 'Tsinghua Univercity Press' ; 
Book.prototype.getTitle = function ( ) { 


return this.title ; 
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} 

Book.prototype.getAuthor = function ( ) { 
return this.author ; 

} 

Book.getPublisher = function ( ) { 
return this.publisher ; 


} 


在 上 面 的 代码 中 ， 定 义 了 Book 类 的 两 个 实例 属性 、 两 个 实例 方法 以 及 一 个 静态 属性 
和 一 个 静态 方法 。 开 发 者 们 可 以 发 现 ， 由 于 Javascript 不 支持 以 public 或 private 等 关键 字 
来 限定 作用 域 ， 因 此 ， 以 上 代码 中 Book 类 的 几 个 属性 和 方法 可 以 被 任意 位 置 的 代码 调用 。 
同 理 ， 如 果 重 新 定义 Book 类 的 某 一 个 方法 ， 那 么 Javascript 很 容易 会 重 构 这 一 方法 ， 导 致 
原 有 的 方法 无 法 继续 使 用 。 

Javascript 的 这 种 特性 使 得 其 语法 和 使 用 方式 比 任何 一 种 面向 对 象 编程 的 语言 都 更 加 
灵活 ， 但 由 于 其 所 有 实体 都 被 开放 到 公共 作用 域 ， 开 发 者 一 不 小 心 就 会 在 定义 实体 时 与 已 
有 的 实体 名 称 重 复 ， 极 其 容易 在 不 知情 的 情况 下 重 构 这 些 实 体 ， 导 致 团 队 协 作 时 出 现代 码 
不 同步 的 问题 和 调用 错误 等 。 


3. 私有 规约 


解决 Javascript 脚本 语言 中 的 公共 作用 域 问 题 ， 最 简单 而 直接 的 办 法 就 是 通过 私有 规 
约 的 方式 进行 规避 。 

私有 规约 是 一 种 变通 方式 ， 其 意义 在 于 通过 开发 团队 内 部 强制 规范 编码 规约 的 方式 ， 
强迫 开发 者 按照 一 些 特定 的 命名 规则 来 命名 一 些 类 或 对 象 的 成 员 ， 将 这 些 成 员 标 记 为 类 似 
其 他 编程 语言 中 的 私有 成 员 ， 从 规约 上 禁止 其 他 开发 团队 的 人 员 在 公共 作用 域内 调用 这 些 
代码 ， 从 而 在 语义 上 实现 私有 作用 域 的 效果 。 

例如 ， 很 多 开发 团队 都 会 对 一 些 需 要 定义 为 私有 成 员 的 实体 进行 特殊 的 命名 法 则 ， 例 
如 在 实体 名 称 中 添加 下 划 线 等 。 在 下 面 的 代码 中 ， 就 定义 了 一 个 类 ， 并 定义 了 类 的 两 个 私 
有 成 员 和 两 个 公有 成 员 ， 代 码 如 下 。 

function User ( strUserName ， strPassword ) { 

this.userName = strUserName ; 


this. password = strPassword ; 

} 

User.prototype.getUserName = function ( ) { 
return this.userName ; 

} 

User.prototype. getPassword = function ( ) { 
return this. password ; 


} 

在 上 面 的 代码 中 ， 就 分 别 定义 了 两 个 实例 属性 和 两 个 实例 方法 ， 其 中 ，userName 属性 
和 getUserName() 方 法 属于 普通 的 公共 作用 域 成 员 ， 而 _password 属性 和 _getPassword() 方 法 
则 属于 语义 上 的 私有 作用 域 成 员 ， 在 成 员 名 称 前 添加 了 下 划 线 作为 标识 。 
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需要 注意 的 是 ， 私 有 规约 只 是 一 种 推荐 用 法 ， 而 非 Javascript 语言 自身 支持 的 功能 ， 
因此 如 果 开 发 者 强制 在 公共 作用 域 调用 _password 属性 和 _getPassword0， 仍 然 是 可 以 实现 
调用 的 。 因 此 ， 在 使 用 私有 规约 时 更 注重 的 是 团队 的 协作 性 和 规范 的 执行 。 


5.3 Javascript 原生 对 象 


在 之 前 的 章节 中 已 经 介绍 过 Javascript 的 原始 数据 类 型 和 引用 数据 类 型 ， 其 中 原始 数 
据 类 型 往往 被 视 为 简单 的 变量 来 处 理 (字符 串 除 外 ), 而 引用 数据 类 型 的 数据 通常 被 视 为 是 
官方 原生 的 类 ， 每 一 条 引用 数据 类 型 的 数据 都 被 视 为 原生 类 的 对 象 实例 ， 继 承 原 生 类 的 属 
性 和 方法 。 以 下 就 将 介绍 这 些 原生 类 及 其 实例 的 使 用 方式 。 


5.3.1 字符 串 对 象 


字符 串 对 象 Sting 是 对 字符 串 类 型 的 原始 数据 的 归纳 和 总 结 ， 其 将 所 有 字符 串 数 据 抽 
象 为 类 ， 并 扩充 出 各 种 属性 和 方法 的 结果 。 通 常情 况 下 ， 字 符 吕 对象 主要 用 来 处 理 各 种 复 
杂 的 文本 内 容 。 

需要 注意 的 是 ， 在 绝 大 多 数 情 况 下 ， 创 建 一 个 字符 串 对 象 都 应 以 直接 对 其 赋值 的 方法 
来 实现 ， 而 不 应 通过 new 运算 符 调用 字符 串 对 象 的 构造 函数 。 另 外 ，Javascript 的 字符 串通 
常 被 视 为 一 种 常量 ， 因 此 所 有 字符 串 对 象 的 方法 都 无 法 修改 字符 串 内 容 本 身 。 

作为 一 种 较为 基础 的 对 象 类 型 ,字符 串 对 象 提供 了 大 量 的 属性 和 方法 ,使用 这 些 方法 ， 
开发 者 可 以 方便 地 对 字符 申 数 据 的 各 种 信息 进行 读 取 操作 。 

1 获取 字符 串 长 度 


字符 串 对 象 String 提供 了 一 个 实例 属性 length， 用 于 检测 某 一 个 字符 串 变量 中 包含 的 
字符 数量 ， 其 使 用 方式 如 下 。 


Instance.lenth ; 

在 上 面 的 伪 代 码 中 ，Instance 关键 字 表示 字符 串 类 型 的 实例 ， 其 可 以 是 一 个 字符 串 类 
型 变量 或 对 象 的 名 称 , 也 可 以 是 一 个 直接 的 字符 串 常量 等 。 在 下 面 的 代码 中 , 就 使 用 length 
属性 来 获取 两 个 字符 串 变 量 的 长 度 ， 如 下 所 示 。 

Var strTest = 'Hello,World! 


console.log ( 'Javascript'.length ) ; // 输 出 10 
console.log ( strTest.length ) ; // 输 出 12 


2. 获取 指定 索引 位 置 的 字符 


字符 串 对 象 通常 是 由 若干 字符 按照 指定 的 排列 顺序 组 成 的 。Javascript 为 方便 开发 者 存 
取 ， 为 字符 串 中 的 所 有 字符 进行 了 编号 处 理 ， 并 为 每 一 个 字符 定义 了 一 个 基于 整数 的 索引 


第 5 章 面向 对 象 的 编程 191 


〈 亦 称 下 标 )。 其 中 ， 第 一 个 字符 索引 号 为 0， 第 二 个 字符 索引 号 为 1， 以 此 类 推 。 
除了 非 负 整数 索引 外 ，, Javascript 还 允许 开发 者 以 倒序 的 方式 通过 负 整 数 索引 来 调 取 字 
符 串 中 的 字符 。 其 中 ，-1 表示 倒数 第 一 个 字符 的 索引 ，-2 表示 倒数 第 二 个 字符 的 索引 ， 
使 用 字符 串 的 字符 索引 ， 开 发 者 可 以 方便 地 获取 字符 串 中 指定 索引 位 置 的 字符 ， 以 及 
字符 在 编码 字符 集中 对 应 的 代码 。 其 中 ， 字 符 串 对 象 的 charAtO 实 例 方 法 可 使 用 字符 索引 
在 字符 串 中 检索 该 位 置 的 字符 ， 其 使 用 方式 如 下 所 示 。 


Character = Instance.charAt ( Index ) ; 


在 上 面 的 伪 代 码 中 ，Character 关键 字 表 示 需 要 获取 的 字符 ，Instance 关键 字 表 示 字 符 
串 对 象 实例 ，Index 关键 字 表 示 索 引号 ， 其 可 以 是 正 序 的 非 负 整数 索引 ， 也 可 以 是 倒序 的 
负 整 数 索引 。 需 要 注意 的 是 ，Index 关键 字 的 取 值 范围 不 得 超过 字符 串 的 实际 长 度 ， 和 否则 
将 无 法 正确 地 获取 字符 。 

例如 ， 定 义 一 个 字符 串 对 象 的 内 容 为 “Javascript”， 然 后 即 可 通过 索引 读 取 其 第 5 个 
字符 的 内 容 ， 代 码 如 下 。 

var strTest = 'Javascript' ; 

console.log ( strTest.charAt ( 4 ) ) ; // 输 出 s 


除了 读 取 指 定 索引 位 置 的 字符 外 ,Javascript 还 允许 开发 者 读 取 该 指定 位 置 字符 在 编码 
字符 集中 对 应 的 代码 ， 其 需要 使 用 到 字符 串 对 象 的 charCodeAtO 实 例 方法 ， 该 方法 可 以 在 
获取 字符 内 容 的 同时 将 其 转换 为 对 应 的 编码 字符 集 代码 。 例 如 ，Web 项 目的 编码 为 utf-8， 
则 可 以 将 字符 转换 为 utf-8 编码 ， 其 使 用 方法 与 charAtO 实 例 方法 类 似 ， 如 下 所 示 。 

CharacterCode = Instance.charCodeAt ( Index ) ; 

在 上 面 的 伪 代 码 中 ，CharacterCode 关键 字 表示 需要 获取 的 对 应 字符 集 编 码 ，Instance 
关键 字 表示 字符 串 对 象 实例 ，Index 关键 字 表示 索引 号 ， 其 使 用 方式 与 charAtO 实 例 方法 
相同 。 

例如 ， 对 之 前 的 实例 稍微 修改 ， 即 可 获得 字母 s 在 utf-8 字符 集中 的 编码 ， 代 码 如 下 。 


var strTest = 'Javascript' ; 
console.log ( strTest.charCodeAt ( 4 ) ) ; // 输 出 115 


3. 检索 字符 串 

Javascript 为 字符 串 对 象 定义 了 两 种 实例 方法 mdexofD 和 lastmdexOfD， 分 别 用 于 将 一 
个 关键 词 从 字符 串 的 正 向 和 反 向 进行 匹配 ， 获 取 匹 配 的 字符 串 位 置 。 

其 中 ，indexOfO 实 例 方法 的 作用 是 从 正 向 检索 关键 词 ， 获 取 在 字符 串 中 第 一 个 匹配 的 
内 容 位 置 ， 其 使 用 方法 如 下 所 示 。 


Index = Instance.indexOf ( Keyword ，FromIndex ) ; 


在 上 面 的 伪 代 码 中 ，Index 关键 字 表 示 检 索 字 符 串 的 结果 的 索引 位 置 ， nstance 关键 字 
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表示 字符 串 对 象 实 例 ; Keyword 关键 字 表 示 检 索 的 关键 词 ; FromIndex 关键 字 为 可 选 参数 ， 
表示 起 始 检索 的 索引 位 置 ， 其 值 应 为 非 负 整数 ， 必 须 小 于 字符 串 的 实际 字符 数 。 

需要 注意 的 是 ， 如 果 Javascript 在 目标 字符 串 中 检索 到 了 关键 词 的 索引 位 置 ， 则 
indexOf0 实 例 方法 将 返回 该 关键 词 第 一 个 字母 在 目标 字符 串 中 的 索引 位 置 ， 如 果 检 索 失 败 
(例如 关键 词 不 存在 ， 或 不 属于 检索 的 范围 )， 则 indexOf0 实 例 方法 将 返回 -1。 

例如 ， 在 一 个 包含 “Tsinghua University Press” 的 字符 串 中 检索 关键 词 “Press”， 获 取 
该 关键 词 在 整个 字符 串 中 的 索引 位 置 ， 代 码 如 下 。 


var strPublisherName = "Tsinghua University Press' ; 
console.1og ( strPublisherName.indexOf ( 'Press' ) ) ; // 输 出 20 


如 果 设 置 indexOf0 实 例 方法 的 第 二 个 参数 起 始 检索 索引 为 21， 则 indexOf0 实 例 方法 
将 无 法 检索 出 结果 ， 只 能 返回 -1， 如 下 所 示 。 


var strPublisherName = 'Tsinghua University Press' ; 
console.1og ( strPublisherName.indexOf ( 'Press' ，21 ) ) ; // 输 出 -1 


另外 需要 注意 的 是 ， 无 论 检索 的 关键 词 在 目标 字符 串 中 出 现 过 多 少 次 ，indexOfO 实 例 
方法 只 会 返回 指定 范围 的 目标 字符 串 中 第 一 个 匹配 的 结果 的 索引 位 置 。 

lastIndexOf() 实 例 方法 与 indexOfO 实 例 方法 相反 ， 其 作用 是 从 反 向 检索 关键 词 ， 获 取 
在 字符 串 中 最 后 一 个 匹配 的 内 容 位 置 ， 其 使 用 方法 如 下 。 


Index = Instance.lastIndexOf ( Keyword ，FromIndex ) ; 


在 上 面 的 伪 代 码 中 ，Index 关键 字 表 示 检 索 字 符 串 的 结果 索引 位 置 ， Instance 关键 字 表 
示 字 符 串 对 象 实例 ，Keyword 关键 字 表 示 检 索 的 关键 词 ，FromIndex 关键 字 为 可 选 参数 ， 
表示 起 始 检索 的 索引 位 置 ， 其 值 必须 为 非 负 整数 ， 小 于 目标 字符 串 的 字符 数量 。 

需要 注意 的 是 , lastIndexOf0) 实 例 方法 返回 的 关键 词 所 在 索引 值 仍然 是 该 关键 词 第 一 个 
字符 在 目标 字符 串 中 的 索引 ， 而 非 最 后 一 个 字符 的 索引 。 例 如 ， 检 索 之 前 字符 串 中 最 后 一 
个 出 现 的 字母 “i” 即 可 通过 以 下 代码 实现 ， 如 下 所 示 。 


var strPublisherName = 'Tsinghua University Press' ; 
console.log ( strPublisherName.lastIndexOf ( 'i' ) ) ; // 输 出 16 


4. 连接 字符 串 
Javascript 为 字符 串 对 象 提供 了 contact0 实 例 方法 ， 帮 助 开 发 者 将 若干 字符 串 合 并 为 一 


个 新 的 字符 串 。 需 要 注意 的 是 ，contact0 实 例 方法 并 不 会 改变 任何 已 有 的 字符 串 对 象 实例 
的 内 容 ， 只 会 返回 一 个 新 的 字符 串 ， 其 使 用 方式 如 下 所 示 。 


Instancel.concat ( Instance2 , Instance3 ，… InstanceN ) ; 


在 上 面 的 伪 代 码 中 ，Instancel、Instance2、Instance3、…*…* InstanceN 等 关键 字 表 示 按 
照 顺序 排列 的 字符 串 对 象 实例 。 例 如 ， 分 别 将 Tsinghua、University 以 及 Press 三 个 字符 串 
对 象 实例 合并 为 一 个 新 的 字符 串 对 象 实例 ， 代 码 如 下 。 
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var strPublisherName = "Tsinghua' .concat ( 'University' ， "Press' ) : 
console.log ( strPublisherName ) ; // 输 出 TsinghuaUniversityPress 


concat0 实 例 方法 不 限制 参数 的 数量 , 因此 其 可 以 将 任意 数量 的 字符 串 对 象 实例 按照 顺 
序 合并 为 一 个 新 的 字符 串 对 象 实例 。 


5. 提取 字符 串 片段 


Javascript 为 字符 串 对 象 提供 了 多 种 实例 方法 ， 帮 助 开 发 者 从 某 一 个 字符 串 中 提取 片 
段 ， 返 回 一 个 新 的 字符 串 ， 其 包括 substring0) 实 例 方法 、slice0 实 例 方法 以 及 substr0 实 例 方 
法 等 。 

如 果 开 发 者 需要 依照 字符 串 的 索引 范围 提取 某 个 字符 串 对 象 实例 的 片段 ， 可 以 使 用 字 
符 串 对 象 的 substring0 实 例 方法 。 该 方法 将 会 按照 开发 者 指定 的 索引 号 范围 ， 将 对 应 的 字 
符 截取 出 来 ， 返 回 为 一 个 新 的 字符 串 对 象 实例 ， 其 使 用 方式 如 下 。 


Result = Instance.substring ( StartIndex , EndIndex ) ; 


在 上 面 的 伪 代 码 中 ，Result 关键 字 表示 提取 的 字符 串 片段 结果 ， 其 将 为 一 个 新 的 字符 
串 对 象 实例 ，Instance 关键 字 表 示 被 提取 的 目标 字符 串 对 象 实例 ; StartIndex 关键 字 表示 提 
取 的 起 始 字符 索引 ， 其 必须 为 非 负 整数 ，EndIndex 关键 字 为 可 选 参数 ， 表 示 提 取 的 结束 字 
符 索引 ， 如 其 被 省 略 ， 则 表示 提取 的 范围 直至 目标 字符 串 的 末尾 。 

例如 ， 提 取 字 符 串 “Javascript” 中 的 “va” 两 个 字符 ， 组 成 一 个 新 的 字符 串 ， 代 码 
如 下 。 


var strLanguage = 'Uavascript' ; 
var strTest = strLanguage.substring (2 ,4);， 
console.1log ( strTest ) ; // 输 出 va 


开发 者 也 可 以 使 用 slice0 实 例 方法 来 提取 字符 串 片 段 , 其 使 用 方法 大 体 与 substring0 方 法 
类 似 ， 如 下 所 示 。 


Result = Instance.slice ( StartIndex ，EndIndex ) ; 


slice() 实 例 方法 与 substring0 实 例 方法 的 区 别 在 于 ， 其 StartIndex 关键 字 可 为 负数 ， 表 
示 字 符 在 字符 串 中 倒序 的 索引 ; EndIndex 关键 字 也 可 为 负数 ， 表 示 字 符 在 字符 串 中 倒序 的 
索引 。 例 如 ， 提 取 字 符 串 “Tsinghua University Press” 中 的 University 字符 串 ， 代 码 如 下 。 


Var strPublisherName = "Tsinghua University Press' ; 
Var strTest = strPublisherName.slice (9 ，19 ) 
console.log ( strTest ) ; // 输 出 University 


需要 注意 的 是 ，slice0 方 法 和 substring0) 方 法 中 的 两 个 参数 指定 的 字符 串 索 引 范 围 必 须 
至 少 包含 一 个 字符 串 ， 如 果 其 不 含有 效 的 字符 串 索 引 范围 (例如 ， 起 始 字 符 索 引 为 3， 结 
束 字符 索引 为 2 等 )， 则 这 两 个 方法 将 返回 一 个 undefined。 

除了 substring0 实 例 方法 和 slice0 方 法 外 ， 开 发 者 也 可 以 使 用 字符 串 对 象 的 substr0 方 
法 来 提取 字符 串 片 段 。 该 方法 更 适合 提取 指定 长 度 的 字符 串 片 段 ， 其 使 用 方法 如 下 所 示 。 
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Result = Instance.substr ( StartIndex , Length ) ; 


在 上 面 的 伪 代 码 中 , Result 关键 字 表示 提取 的 字符 串 片 段 结果 ; Instance 关键 字 表 示 字 
符 串 对 象 实例 ; StartIndex 关键 字 表 示 提 取 目 标 字 符 串 时 的 起 始 字符 索引 ， 与 slice0 实 例 方 
法 类 似 ， 该 关键 字 也 可 以 为 负数 ， 表 示 倒 序 的 索引 ; Length 关键 字 为 可 选 参数 ， 其 必须 为 
一 个 非 负 整数 ， 表 示 截 取 的 字符 片段 长 度 ， 如 该 关键 字 被 省 略 ， 表 示 截 取 的 范围 直至 目标 
字符 串 结尾 。 

需要 注意 的 是 ， 虽 然 几 乎 所 有 的 Web 浏览 器 都 支持 字符 串 对 象 的 substr0 方 法 ， 但 是 
该 方法 并 非 ECMAScript 规范 的 标准 方法 ， 日 ECMA 国际 也 并 未 有 计划 将 其 规范 为 未 来 的 
标准 ， 因 此 为 防止 未 来 某 些 Web 浏览 器 移 除 此 方法 ， 在 截取 字符 串 片 段 时， 推荐 使 用 功能 
强大 且 符 合 ECMAScript 标准 的 slice0 方 法 进行 操作 。 


6. 分 割 字 符 串 数组 


数组 是 Javascript 一 种 特殊 的 数据 存储 格式 ， 其 作用 是 将 若干 变量 或 对 象 按 照 指 定 的 
顺序 以 元 素 的 方式 存储 到 一 个 对 象 中 ， 然 后 提供 若干 属性 和 方法 ， 帮 助 开 发 者 对 这 些 变 量 
和 对 象 进行 处 理 。Javascript 为 字符 串 对 象 提供 了 split0 实 例 方法 ， 帮 助 开 发 者 以 指定 的 分 
隔 符 将 一 个 字符 串 拆 分 为 多 个 以 字符 或 字符 串 组 成 的 数组 。 

字符 串 对 象 的 split0 实 例 方 法 与 数组 对 象 的 join() 方 法 操作 完全 相反 ， 其 使 用 方式 如 下 
所 示 。 


Array = Instance.split ( Seperator , Count ) ; 


在 上 面 的 伪 代 码 中 ，Array 关键 字 表示 分 割 的 结果 数组 对 象 实例 ，Instance 关键 字 表 示 
字符 串 对 象 实例 ，Seperator 关键 字 表示 分 割 字 符 串 的 分 隔 符 标记 ; Count 关键 字 为 可 选 参 
数 ， 表 示 分 割 的 结果 数组 对 象 实例 的 最 大 元 素数 ， 如 省 略 该 参数 ， 则 表示 将 整个 字符 串 对 
象 实例 以 最 大 限度 分 割 。 

split0 实 例 方 法 的 第 一 个 参数 是 必 选 参数 。 如 果 不 需 要 设置 分 隔 符 , 开发 者 可 以 定义 一 
个 空 字符 串 将 其 作为 分 隔 符 ， 此 时 split0 实 例 方法 将 把 字符 串 实例 的 每 个 字符 分 割 为 数组 
元 素 。 

分 隔 符 必 须 为 一 个 字符 串 对 象 ， 其 可 以 是 任意 字符 串 值 ， 包 括 喜 号、 空格 等 。 例 如 ， 
将 包含 三 个 单词 且 以 空格 分 隔 的 字符 串 “Tsinghua University Press” 拆 分 为 三 个 数组 元 素 ， 
并 放置 在 一 个 独立 数组 中 ， 代 码 如 下 。 


Var arrWords = [] > 


var strPublisherName = 'Tsinghua University Press'" 


arrWords = strPublisherName.split ( "' ');，; 


如 果 只 需要 获取 该 字符 串 前 两 个 单词 ， 则 可 以 用 split0 实 例 方法 添加 第 二 个 参数 ， 设 置 
其 为 2， 代 码 如 下 。 
Var arrWords = [] ; 


var strPublisherName = "Tsinghua University Press'" 


arrWords = strPublisherName.split (" "' ，2) 
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5.3.2 日 期 对 象 


日 期 对 象 Date 的 作用 是 提供 一 个 类 , 为 开发 者 提供 若干 方法 以 处 理 日 期 和 时 间 类 型 的 
数据 和 信息 。 日 期 对 象 是 Javascript 原型 对 象 衍生 而 来 的 特殊 集合 ， 其 存储 了 八 种 类 型 的 
数据 ， 分 别 为 年 份 、 月 份 、 日 期 、 小 时 、 分 钟 、 秒 、 毫 秒 以 及 星期 。 这 八 种 类 型 的 数据 结 
合 在 一 起 ， 就 可 以 构成 一 个 完成 的 时 间 节 点 。 

1. 创建 日 期 实例 

日 期 对 象 是 一 种 典型 的 引用 变量 ， 因 此 其 可 以 很 方便 地 被 实例 化 为 一 个 描述 日 期 时 间 
信息 的 对 象 实例 。 在 使 用 new 运算 符 调 用 日 期 对 象 的 构造 函数 对 日 期 对 象 进行 实例 化 的 过 
程 中 ，Javascript 会 自动 从 其 构造 函数 的 参数 中 读 取 , 或 从 当前 系统 时 间 中 记录 实例 化 的 时 
间 信息 ， 将 其 存储 到 日 期 对 象 实例 中 。 完 整 的 日 期 对 象 构造 函数 使 用 方法 如 下 所 示 。 


var Instance = new Date ( Year , Month , Date , Hour , Minute , Second, 


Millisecond ) > 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表示 实例 的 名 称 ;， Year 关键 字 实例 的 年 份 , Month 
关键 字 表示 实例 的 月 份 ; Date 关键 字 表示 实例 的 日 期 ;Hour 关键 字 表示 实例 的 小 时 ; Minute 
关键 字 表示 实例 的 分 钟 ; Second 关键 字 表 示 实 例 的 秒 ; Millisecond 关键 字 表 示 实 例 的 毫秒 。 

日 期 对 象 的 构造 函数 参数 是 可 以 省 略 的 。 当 日 期 对 象 的 构造 函数 没有 参数 时 ， 默 认 将 
读 取 系 统 当前 时 间 ， 存 入 生成 的 实例 中 ， 如 果 日 期 对 象 的 构造 函数 参数 为 三 个 数字 时 ， 则 
Javascript 会 依次 按照 参数 的 书写 顺序 将 其 识别 为 年 份 、 月 份 和 日 期 ; 如 果 日 期 对 象 的 构造 
函数 参数 为 6 个 数字 时 ，Javascript 会 依次 按照 参数 的 书写 顺序 将 其 识别 为 年 份 、 月 份 、 日 
期 、 小 时 、 分 钟 和 秒 。 缺 少 的 参数 将 被 设置 为 默认 值 ， 各 参数 的 默认 值 如 表 5-2 所 示 。 


表 5-2 日 期 对 象 构造 函数 各 参数 默认 值 
参数 名 作用 ” 默认 值 ” 取 值 范 围 参数 名 ”作用 默认 值 ” 取 值 范围 


Year 年 份 - -271820 一 275760 Month 月 份 0 0 一 11 
Date 日 期 1 1~31 Hour 小 时 0 0~23 
Minute 分 钟 0 0 一 59 Second 秒 0 0~59 
Millisecond “毫秒 0 0~999 


在 此 需要 注意 的 是 在 设置 年 份 时 ， 年 份 的 取 值 范围 与 客户 端的 操作 系统 紧密 相关 。 通 
常情 况 下 ， 版 本 越 新 的 操作 系统 支持 的 年 份 范 围 就 越 大 ， 早 期 的 操作 系统 往往 只 支持 
1970~2069 之 间 的 年 份 取 值 。 现 今 的 新 版 本 Windows 操作 系统 (如 Windows 8.1) 已 经 支 
持 -271820~275760 之 间 的 54 万 余年 的 时 间 取 值 范 围 。 

另外 ， 在 定义 年 份 的 参数 时 ， 如 果 年 份 的 数字 为 两 位 数 时 ，Javascript 会 自动 将 其 设置 
为 19 开头 的 20 世纪 年 份 。 如 设置 年 份 数字 为 1 时 ，Javascript 会 将 其 识别 为 1901 年 ; 如 
设置 年 份 数字 为 54 时 ，Javascript 会 将 其 识别 为 1954 年 。 

在 定义 月 份 的 参数 时 还 需要 注意 ， 当 月 份 的 参数 中 数字 为 0 时 ， 表 示 1 月 ， 数 字 为 1 
时 表示 为 2 月 ， 以 此 类 推 。 例 如 ， 定 义 一 个 完整 的 日 期 1983 年 9 月 5 日 16 时 27 分 22 秒 
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370 毫秒 ， 代 码 如 下 。 


Var dtBirthday = new Date ( 1983 ，8 ，5 ，16 ，27 ，22 ，370 ) : 


如 果 仅 需 要 定义 一 个 简单 的 日 期 信息 ， 不 需要 设置 时 间 信息 ， 则 可 以 只 使 用 日 期 对 象 
构造 函数 的 前 三 个 参数 ， 按 照 顺序 进行 构造 ， 代 码 如 下 。 


var dtBirthday = new Date ( 1983 ，8 ，5 ) > 


如 果 期 望 获取 当前 系统 的 日 期 时 间 ， 将 其 存储 到 日 期 对 象 中 ， 则 可 以 保持 构造 函数 参 
数 为 空 ， 代 码 如 下 。 


var dtNow = new Date ( ) ; 
2. 输出 日 期 时 间 信 息 


日 期 对 象 是 一 种 典型 的 引用 类 型 数据 ， 因 此 无 法 通过 各 种 输出 信息 的 方式 (如 
window.alert() 方 法 、document.write() 方 法 以 及 console.log0 方 法 等 ) 直接 输出 日 期 信息 的 具 
体 值 。 如 果 开 发 者 希望 输出 日 期 对 象 存 储 的 具体 时 间 值 ， 则 可 以 通过 日 期 对 象 由 原型 对 象 
继承 而 来 的 toString() 方 法 来 实现 ， 代 码 如 下 。 

var dtBirthday = new Date ( 1983 ，8 ，5 ，16 ，27 ，22 ，370 ) :， 


// 输 出 Mon Sep 05 1983 16:27:22 GMT+0800 (中 国标 准时 间 ) 
console.log ( dtBirthday.tostring ( ) ) ; 


需要 注意 的 是 ，toString0 方 法 输出 的 是 默认 格式 的 日 期 时 间 信息 ， 因 此 ， 其 格式 和 书 
写 习 惯 完全 是 欧美 式 的 ， 同 时 也 无 法 实现 输出 信息 的 订 制 。 如 果 需 要 输出 一 些 特殊 格式 或 
要 求 的 日 期 时 间 信息 ， 则 可 以 使 用 日 期 对 象 提 供 的 其 他 几 种 方法 对 输出 的 时 间 信 息 进行 订 
制 ， 如 表 5-3 所 示 。 
表 5-3 日 期 对 象 的 几 种 输出 日 期 时 间 信息 的 方法 


方法 名 作用 示例 

toTimeString() 输出 时 间 信 息 〈 时 分 秒 ) 17:36:32 GMT+0800 (中 国标 准时 间 ) 
toDateStringO 输出 日 期 信息 (年 月 日 Wed Apr 30 2014 

toUTCString0 输出 标准 时 信息 (格林 威 治 ) Wed, 30 Apr 2014 10:09:03 GMT 
toLocaleStringO 输出 本 地 格式 日 期 时 间 信 息 2014 年 4 月 30 日 18:09:34 


toLocaleTimeString0 ”输出 本 地 格式 时 间 信息 (时 分 秒 ) “18:09:34 
toLocaleDateString0 ”输出 本 地 格式 日 期 信息 (年 月 日 ) ”2014 年 4 月 30 日 

上 表 中 的 后 三 种 方法 会 根据 客户 端 操作 系统 的 区 域 设置 来 返回 指定 格式 的 日 期 时 间 
信息 ， 如 果 本 地 操作 系统 的 区 域 设置 为 中 国 ， 则 返回 中 文 的 日 期 时 间 信息 ， 以 此 类 推 。 


3. 时 间 节 点 的 比较 


在 一 些 特殊 的 应 用 需求 下 ， 开 发 者 可 能 需要 对 日 期 对 象 的 实例 进行 比较 ， 判 断 两 个 日 
期 对 象 的 实例 哪 一 个 更 早 一 些 或 哪 一 个 更 晚 一 些 。 由 于 日 期 对 象 并 非 一 个 简单 的 原始 类 型 
数值 ， 因 此 通常 情况 下 无 法 直接 对 其 以 关系 运算 符 来 进行 比较 。 
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基于 此 种 需求 ， 日 期 对 象 提供 了 一 个 特殊 的 getTime0 实 例 方 法 ， 该 方法 可 以 获取 从 标 
准时 (1970 年 1 月 1 日 0 时 0 分 0 秒 0 毫秒 ) 至 日 期 对 象 存储 的 时 间 节 点 为 止 经 历 的 毫秒 
数 ， 根 据 这 一 毫秒 数 进行 判断 ， 开 发 者 即 可 便捷 地 获得 两 个 时 间 的 比较 结果 。 

例如 ， 编 写 一 段 比较 1983 年 9 月 5 日 16 时 27 分 22 秒 370 毫秒 和 2004 年 7 月 1 日 
11 时 21 分 39 秒 119 毫秒 两 个 时 间 节 点 哪 一 个 更 早 一 些 , 即 可 通过 getTime() 方 法 首先 读 取 
标准 时 到 这 两 个 时 间 节 点 跨 过 的 毫秒 数 ， 然 后 再 对 两 个 毫秒 数 进行 比较 ， 毫 秒 数 较 少 的 时 
间 节 点 即 较 早 的 时 间 节 点 ， 代 码 如 下 。 


var dtMyBirthday = new Date ( 1983 ，8 ，5 ，16 ，27 ，22 ，370 ) : 
var dtGraduationDay = new Date ( 2004，7，1，11 ，21 ，39，370 ) 
var intMyBirthdayMilliseconds = dtMyBirthday.getTime ( ) : 
var intGraduationDayMilliseconds = dtGraduationDay .getTime ( ); 
if ( intMyBirthdayMilliseconds < intNowMilliseconds ) { 

console.log ( 'My Birthday is earlier.' ) ; 
} else { 

console.log ( 'My Graduation Day is earlier.' ) ; 


} 


除了 使 用 getTimeO 实 例 方法 外 ， 开 发 者 也 可 以 使 用 日 期 对 象 的 静态 方法 UTCO， 通 过 
具体 的 时 间 参 数 获取 格林 威 治 时 间 版 本 下 从 标准 时 (1970 年 1 月 1 日 0 时 0 分 0 秒 0 毫 秒 ) 
至 日 期 对 象 存储 的 时 间 节 点 为 止 经 历 的 毫秒 数 ， 其 方法 如 下 所 示 。 


Date.UTC ( Year , Month , Date , Hour , Minute , Second , Millisecond ); 


在 上 面 的 伪 代 码 中 ， 第 一 个 Date 为 日 期 对 象 的 类 名 ;， Year 关键 字 为 时 间 节 点 的 年 份 ; 
Month 关键 字 为 时 间 节 点 的 月 份 ， 第 二 个 Date 关键 字 为 时 间 节 点 的 日 期 ，Hour 关键 字 为 
时 间 节 点 的 小 时 ; Minute 关键 字 为 时 间 节 点 的 分 钟 ，Second 关键 字 为 时 间 节 点 的 秒 数 ; 
Millisecond 关键 字 为 时 间 节 点 的 毫秒 数 。 

需要 区 别 的 是 ，getTimeO 实 例 方法 获取 的 毫秒 数 是 以 本 地 时 区 来 计算 的 ， 而 UTCO 静 
态 方法 是 以 格林 威 治 时 区 来 计算 的 。 因 此 当 且 仅 当 本 地 时 区 与 格林 威 治 时 区 一 致 时 ， 这 两 
种 方法 返回 的 结果 才 一 致 。 

4. 获取 日 期 时 间 数 据 


除了 直接 输出 日 期 对 象 存储 的 时 间 信 息 为 字符 串 外 ， 开 发 者 也 可 以 通过 日 期 对 象 提 供 
的 一 系列 实例 方法 获取 日 期 时 间 节点 内 的 各 种 数据 , 包括 该 节点 在 本 地 时 间 的 年 份 、 月 份 、 
日 期 、 星 期 、 小 时 、 分 钟 、 秒 、 毫 秒 ， 以 及 换算 为 格林 威 治 时 间 后 的 这 些 时 间 数 据 。 

关于 获取 日 期 时 间 数 据 , 日 期 对 象 一 共 提 供 了 16 种 实例 方法 , 其 返回 值 均 为 整数 类 型 的 
数据 ， 且 处 于 一 定 的 范围 中 ， 如 表 5-4 所 示 。 

表 5-4 日 期 对 象 获取 时 间 数 据 的 实例 方法 

方法 名 作用 最 小 返回 值 最 大 返回 值 
getFullYear0 获取 本 地 时 间 的 年 份 -271820 275760 
getMonthO 获取 本 地 时 间 的 月 份 0 11 
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方法 名 作用 最 小 返回 值 最 大 返回 值 
getDate0 获取 本 地 时 间 的 日 期 1 31 
getDay0 获取 本 地 时 间 的 星期 0 6 
getHours() 获取 本 地 时 间 的 小 时 0 23 
getMinutes() 获取 本 地 时 间 的 分 钟 0 59 
getSeconds() 获取 本 地 时 间 的 秒 数 0 59 
getMilliseconds() 获取 本 地 时 间 的 毫秒 数 0 999 
getUTCFullYear0 获取 格林 威 治 时 间 的 年 份 -271820 275760 
getUTCMonth0 获取 格林 威 治 时 间 的 月 份 0 11 
getUTCDate0 获取 格林 威 治 时 间 的 日 期 0 31 
getUTCDay0 获取 格林 威 治 时 间 的 星期 0 6 
getUTCHoursO 获取 格林 威 治 时间 的 小 时 0 23 
getUTCMinutesO 获取 格林 威 治 时 间 的 分 钟 0 59 
getUTCSeconds0) 获取 格林 威 治 时 间 的 秒 数 0 59 
getUTCMilliseconds0 ”获取 格林 威 治 时 间 的 毫秒 数 0 999 


例如 ， 读 取 1983 年 9 月 5 日 16 时 27 分 22 秒 370 毫秒 这 一 时 间 节点 的 日 期 时 间 信 息 
数据 ， 可 以 通过 如 下 代码 实现 。 
var dtMyBirthday = new Date ( 1983 ，8 ，5 ，16 ， 


console.1og(' 我 出 生 在 ' + dtMyBirthday.getFullYear() + ' 年 ' + 
dtMyBirthday.getMonth() + ' 月 ' + dtMyBirthday.getDate() + 


上 


' 日 ' + dtMyBirthday.getHours() + ' 点 ' + 
dtMyBirthday.getMinutes() + ' 分 ' + dtMyBirthday.getSeconds () 


+ ' 秒 ，); // 输 出 “我 出 生 在 1983 年 8 月 5 日 16 点 27 分 22 秒 ” 


5. 设置 日 期 时 间 数 据 
除了 获取 日 期 时 间 数 据 外 ， Javascript 还 为 日 期 对 象 的 实例 提供 了 设置 日 期 时 间 数 据 的 
一 系列 实例 方法 。 与 获取 日 期 时 间 数 据 类 似 ， 其 可 定义 该 实例 所 包含 的 时 间 节 点 在 本 地 时 
间 的 年 份 、 月 份 、 日 期 、 小 时 、 分 钟 、 秒 、 毫 秒 ， 以 及 换算 为 格林 威 治 时 间 后 的 这 些 时 间 


数据 .日 期 对 象 设置 时 间 数 据 的 实例 方法 包含 14 种 ， 如 表 5-5 所 示 。 
表 5-5 日 期 对 象 设置 时 间 数 据 的 实例 方法 


2 


方法 名 作用 最 小 值 最 大 值 
setFullYear0 设置 本 地 时 间 的 年 份 -271820 275760 
setMonth() 设置 本 地 时 间 的 月 份 11 
setDate() 设置 本 地 时 间 的 日 期 1 31 
setHours() 设置 本 地 时 间 的 小 时 0 23 
setMinutes() 设置 本 地 时 间 的 分 钟 0 59 
setSeconds() 设置 本 地 时 间 的 秒 数 0 59 
setMilliseconds() 设置 本 地 时 间 的 毫秒 数 0 999 
setUTCEFulIYear0 设置 格林 威 治 时 间 的 年 份 -271820 275760 
setUTCMonthO 设置 格林 威 治 时 间 的 月 份 0 i 
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续 表 
方法 名 作用 最 小 值 最 大 值 
setUTCDate() 设置 格林 威 治 时 间 的 日 期 0 31 
setUTCHoursO 设置 格林 威 治 时 间 的 小 时 0 23 
setUTCMinutes0 设置 格林 威 治 时 间 的 分 钟 0 59 
setUTCSeconds() 设置 格林 威 治 时 间 的 秒 数 0 59 
setUTCMilliseconds() ”设置 格林 威 治 时 间 的 毫秒 数 ” 0 999 


例如 ， 初 始 化 一 个 当前 时 间 节 点 的 日 期 对 象 实例 ， 然 后 将 其 设置 为 1983 年 9 月 5 日 
16 时 27 分 22 秒 370 毫秒 ， 代 码 如 下 。 


var dtNow = new Date ( ) 
dtNow.setFullYear ( 1983 ) ; 
dtNow.setMonth ( 8 ) : 
dtNow.setDate (5 ) :; 
dtNow.setHours ( 16 ) : 
dtNow.setMinutes ( 27 ) ; 
dtNow.setSeconds ( 22 ) : 
dtNow.setMilliseconds ( 370 ) ; 


5.3.3 ”数组 对 象 


数组 对 象 Array 是 Javascript 中 十 分 重要 的 一 种 对 象 , 其 作用 是 提供 一 种 临时 性 的 多 维 
数据 解决 方案 ， 人 允许 开发 者 将 一 个 或 多 个 数据 组 成 一 个 集合 来 存储 、 管 理 和 维护 ， 并 提供 
- 些 属性 和 方法 来 对 这 些 数 据 进行 处 理 。 每 一 个 数组 都 是 数组 对 象 的 一 个 实例 ， 数 组 中 包 
含 的 每 一 条 数据 都 是 数组 的 元 素 。 数 组 就 像 一 个 小 型 的 数据 库 ， 在 程序 开发 过 程 中 ， 应 用 
数组 对 管理 批量 数据 具有 重要 的 作用 。 

1. 构建 一 个 数组 实例 

Javascript 提供 了 两 种 构建 数组 实例 的 方法 , 其 一 是 通过 数组 对 象 的 构造 函数 和 参数 构 
建 数 组 对 象 实例 ， 另 一 种 则 是 依靠 直接 书写 数组 的 源 代码 方式 构建 数组 对 象 实例 。 

数组 对 象 的 构造 函数 Array0 可 以 直接 构造 数组 对 象 实例 ， 并 根据 参数 决定 数组 的 内 
容 ， 其 基本 用 法 如 下 所 示 。 

Var Instance = new Array ( ); 

在 上 面 的 伪 代 码 中 ，Instance 关键 字 表示 数组 对 象 实例 的 名 称 ， 在 使 用 这 种 方式 构建 
数组 时 ， 将 直接 产生 一 个 空 的 数组 对 象 实例 。 例 如 ， 定 义 一 个 名 为 arrTest 的 空 数 组 对 象 实 
例 ， 代 码 如 下 。 


Var arrTest = new Array ( ) 


数组 对 象 的 构造 函数 是 支持 参数 的 。 当 其 具有 一 个 非 负 整数 参数 时 ， 将 直接 构建 一 个 
具有 与 参数 值 相等 数量 空 元 素 的 数组 ， 方 法 如 下 。 


200 高 效 Web 前 端 开发 之 路 一 一 YUI 3.15 


Var Instance = new Array ( Nonnegint ) ; 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表 示 数 组 对 象 实例 的 名 称 ; Nonnegint 关键 字 表示 
数组 实例 预 置 的 空 元 素数 量 。 例 如 ， 定 义 一 个 包含 10 个 空 元 素 的 数组 ， 代 码 如 下 。 


Var arrTest = new Array ( 10 ); 


Javascript 中 的 数组 是 一 种 动态 数组 ， 其 和 C#、Java 等 大 型 编程 语言 中 的 数组 最 大 的 
区 别 在 于 ，C#、Java 等 大 型 编程 语言 中 的 数组 元 素数 量 是 只 读 的 ， 也 就 是 说 定义 一 个 数组 
的 元 素数 量 后 就 无 法 对 其 进行 修改 。Javascript 的 数组 元 素数 量 是 可 写 的 ， 开 发 者 可 以 随时 
增加 或 减少 其 元 素 的 数量 ， 不 受 任何 限制 。 因 此 ， 在 构建 Javascript 的 数组 实例 时 ， 通 常 
不 需要 显 式 地 定义 数组 元 素 的 数量 。 

如 果 需 要 为 构建 的 数组 对 象 实例 预先 置 入 一 个 以 上 的 非 空 元 素 ， 则 可 以 直接 将 一 个 以 
上 的 数组 元 素 以 逗号 “,” 分 隔 的 方式 作为 参数 添加 到 构造 函数 中 ， 方 法 如 下 。 


var Instance = new Array ( Element0 ，Elementl ，… , ElementN ) ; 
在 上 面 的 伪 代 码 中 ，Instance 关键 字 表 示 数 组 对 象 实例 的 名 称 ; Element0、Elementl、 


ElementN 等 关键 字 表示 初始 化 添加 的 数组 元 素 。 例 如 ， 将 自然 数 1、 字 符 串 aray、null、 
当前 时 间 dtNow 四 个 对 象 作为 元 素 添 加 到 arrTest 数组 中 ， 代 码 如 下 。 


var dtNow = new Date ( ) : 
Var arrTest = new Array ( 1 , 'array' , null , dtNow ) ; 


需要 注意 的 是 ， 以 上 这 种 方法 只 能 建立 元 素数 量 为 两 个 或 两 个 以 上 的 数组 实例 ， 这 些 
元 素 将 按照 构造 函数 参数 的 顺序 来 决定 其 在 数组 内 部 存储 的 顺序 。 数 组 可 以 存储 任意 类 型 
的 数据 ， 包 括 但 不 仅 包 括 数字 、 布 尔 值 、 字 符 串 、null、undefined、 内 置 对 象 、 自 定义 的 
对 象 乃至 其 他 数组 。 但 是 需要 注意 的 是 数组 不 能 存储 其 自身 。 

除了 使 用 构造 函数 构建 数组 实例 外 ， 开 发 者 也 可 以 直接 通过 书写 源 代码 的 方式 建立 数 
组 ， 其 需要 使 用 中 括号 “[]” 运 算 符 来 蔡 代数 组 ， 如 下 所 示 。 

Var arrTest = [ ] 

在 上 面 的 代码 中 ， 通 过 中 括号 “[]” 运 算 符 构建 了 一 个 空 数组 ， 将 其 赋予 arrTest 数组 
对 象 。 如 果 需 要 建立 非 空 数组 ， 则 可 以 将 数组 的 元 素 按照 顺序 以 逗号 “,” 分 隔 的 方式 书写 
在 中 括号 中 。 例 如 ， 同 样 建立 之 前 包括 自然 数 1、 字 符 串 array、null、 当 前 时 间 dtNow 等 
四 个 对 象 的 数组 实例 ， 代 码 如 下 。 


var dtNow = new Date ( ) : 


Var arrTest = [ 1 , 'array' , null , dtNow ] ; 


需要 注意 的 是 ， 数 组 的 元 素 是 有 顺序 的 ， 即 便 两 个 数组 包含 的 元 素 完 全 一 样 ， 但 顺序 
不 同 ， 也 不 能 判定 这 两 个 数组 相等 。 


2. 输出 数组 所 有 元 素 
Javascript 脚本 语言 提供 了 两 种 方式 输出 数组 示例 中 的 所 有 元 素 , 一 种 是 直接 以 实例 名 
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称 的 方式 输出 数组 实例 ， 代 码 如 下 。 


1 | 
Consolen lod ( AreTest ) FJ/ 和 3 


除 此 之 外 ， 开 发 者 也 可 以 使 用 数组 对 象 由 Javascript 原型 对 象 继承 而 来 的 toString0 实 
例 方法 来 将 数组 元 素 输出 出 来 ， 代 码 如 下 。 


WW: 
console.1og ( arrTest.toString ( ) ) ; // 输 出 1 ，2 ，3 ，4 ，5 


以 上 这 两 种 方式 输出 数组 元 素 中 的 实例 ， 效 果 是 完全 一 样 的 。 在 输出 数组 实例 的 所 有 
元 素 时 需要 注意 ， 如 果 数组 中 某 些 元 素 并 非 可 以 直接 输出 值 的 元 素 〈 例 如 其 他 数组 、 对 象 
等 )，Javascript 会 自动 对 这 些 元 素 调用 toString(0) 方 法 进行 强制 转换 ， 将 其 转换 为 字符 串 后 
青 依 次 输出 。 

3. 读 取 数 组 元 素数 量 


Javascript 为 数组 对 象 提供 了 一 个 实例 属性 length， 该 属性 会 返回 数组 对 象 实例 的 元 素 
数量 ， 如 下 所 示 。 


Instance.length ; 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表示 数组 对 象 实例 的 名 称 。 例 如 ， 定 义 一 个 名 为 
arrTest 的 数组 ， 并 为 其 添加 几 个 元 素 ， 然 后 即 可 通过 其 length 实例 属性 读 取 元 素 的 数量 ， 
如 下 所 示 。 


var arrTeost = [121 
console.log ( arrTest.length ) ; // 输 出 数字 5 


4. 读 写 数组 元 素 


在 数组 实例 中 ， 其 各 种 元 素 通常 会 按照 构建 的 顺序 进行 排列 ， 这 种 排列 被 称 作 数 组 元 
素 的 索引 (或 下 标 )。 数 组 元 素 的 索引 顺序 是 一 组 整数 ， 其 可 以 是 0 和 正 整数 ， 也 可 以 是 负 
整数 。 

在 默认 情况 下 ,数组 元 素 的 索引 以 数字 0 开始 排列 , 例如 ,一 个 包含 5 个 元 素 的 数组 ， 
其 元 素 的 索引 就 依次 为 0、1、2、3、4。 负 整数 也 可 以 作为 数组 元 素 的 索引 ， 当 一 个 数组 
元 素 的 索引 为 -1 时 ， 表 示 其 为 数组 中 最 后 一 个 元 素 ， 如 其 索引 为 -2， 则 其 为 数组 中 倒数 第 
二 个 元 素 ， 以 此 类 推 。 

数组 元 素 的 索引 是 该 元 素 最 重要 的 特性 ， 通 过 该 特性 ， 开 发 者 可 以 方便 地 引用 这 些 元 
素 ， 像 操作 普通 变量 一 样 进行 读 取 或 写 入 操作 ， 其 方法 如 下 。 

Instance [ Index ] ; 

在 上 面 的 伪 代 码 中 ，Instance 关键 字 表 示 数 组 实例 的 实例 名 称 ，Index 关键 字 表示 数组 


元 素 的 索引 号 。 例 如 ， 读 取 一 个 数组 中 第 一 个 元 素 ， 可 以 将 Index 关键 字 设 置 为 0。 在 下 
面 的 代码 中 ， 就 通过 数组 元 素 的 索引 ， 分 别 将 数组 中 的 每 一 个 元 素 值 减 去 1， 代 码 如 下 。 
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var arrTest 下 


arrTest [ = arrTest 


5 
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] 0 
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Leg 0 


console. arrTest ) ; 


如 果 需 要 批量 地 读 取 数 组 中 的 几 个 连续 的 元 素 , 则 可 以 通过 数组 对 象 提供 的 slice0 实 例 方 
法 来 实现 。slice() 方 法 可 以 按照 指定 的 起 始 索引 和 结束 索引 ， 获 取 若 干 连续 的 数组 元 素 ， 
将 其 存储 到 一 个 新 的 数组 中 ， 其 使 用 方式 如 下 所 示 。 


Instance.slice ( StartIndex , EndIndex ) ; 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表 示 数 组 实例 的 名 称 ;，StartIndex 关键 字 为 必 选 参 
数 ， 表 示 起 始 的 数组 元 素 索 引 ; EndIndex 关键 字 为 可 选 参数 ， 表 示 结 束 的 数组 元 素 索引 ， 
如 被 省 略 ， 表 示 截 取 从 StartIndex 的 索引 开始 直至 数组 末尾 所 有 的 元 素 。 
例如 ， 操 作 一 个 包含 数字 1、2、3、4、5 的 数组 ， 截 取 其 第 2 个 元 素 开始 直至 结束 的 
所 有 元 素 ， 代 码 如 下 。 
Var arrTest = [1,2,3,4 了 
2 3 


’ 
console.log ( arrTest.slice (1 


如 果 需 要 截取 该 数组 中 第 2 个 元 素 开始 直至 倒数 第 二 个 元 素 之 间 的 所 有 元 素 ， 则 可 将 
slice0 实 例 方法 的 第 二 个 参数 设置 为 -2， 代 码 如 下 。 

var arrTest 三 下 2 riS] 3 

console.log ( arrTest.slice ( 1 ,-2) ) ; // 输 出 2 ，3 


5. 添加 数组 元 素 


Javascript 提供 了 三 种 为 数组 对 象 实例 添加 数组 元 素 的 方式 ,其 分 别 需要 使 用 三 个 不 同 
的 数组 实例 方法 ， 包 括 unshift0 方 法 、push() 方 法 以 及 splice0 方 法 。 

其 中 , unshift0 方 法 的 作用 是 从 数组 元 素 的 起 始 位 置 添加 新 的 元 素 , 并 返回 一 个 新 的 数 
组 长 度 值 。unshift0 方 法 会 直接 修改 原 数组 ， 而 并 非 返回 一 个 新 的 数组 ， 因 此 在 使 用 该 方法 
时 需要 格外 小 心 ， 其 使 用 方式 如 下 。 


Instance.unshift ( ELlementl , Element2 ，… , ElementN ) ; 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表示 数组 对 象 的 实例 ，Elementl 、Element2、 
ElementN 等 关键 字 表 示 为 数组 起 始 位 置 添 加 的 元 素 。unshift0 方 法 本 身 并 不 限制 参数 的 数 
量 ， 也 就 是 说 开发 者 可 以 为 数组 添加 任意 数量 的 元 素 。 例 如 ， 为 一 个 包含 2、3、4、5 四 个 
元 素 的 数组 起 始 位 置 添加 0 和 1 两 个 元 素 ， 方 法 如 下 。 

War qrrTest = 让 计生 

console.log ( arrTest.unshift (0 ，1 ) ) ; // 输 出 6 
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console.log ( arrTest ) ; // 输 出 0，1，2，3,，4，5 


如 果 需 要 为 数组 的 末尾 追加 新 的 元 素 ， 则 可 以 使 用 数组 的 pushO 实 例 方法 ， 该 方法 的 
使 用 方式 基本 上 与 unshift0 方 法 一 致 ， 如 下 所 示 。 


Instance.push ( 了 Elementl , Element2 ，… , ElementN ) ; 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表示 数组 对 象 的 实例 ;Elementl 、Element2、 
ElementN 等 关键 字 表示 为 数组 末尾 位 置 添 加 的 元 素 。 push() 方 法 本 身 也 不 限制 参数 的 数量 ， 
例如 ， 为 一 个 包含 a、b、c 三 个 元 素 的 数组 末尾 添加 d、e、f 三 个 元 素 ， 方 法 如 下 。 

Var arrTest = [ "a ; "b” ; "ce ] 7 

console.log ( arrTest.push ( 'd' ，'e' ，'f' ) ) ; // 输 出 6 

console.log ( arrTest ) ; // 输 出 a, b,c,d,e,f 


之 前 两 种 方法 只 能 在 数组 的 起 始 位 置 和 末尾 位 置 添加 元 素 ， 如 果 需 要 再 指定 的 其 他 位 
置 添加 元 素 ， 则 需要 使 用 到 数组 的 splice() 实 例 方法 。splice0 方 法 是 一 种 功能 强大 的 方法 ， 
其 不 仅 可 以 为 数组 指定 位 置 添加 元 素 ， 还 可 以 删除 指定 位 置 若干 连续 的 元 素 ， 其 使 用 方法 
如 下 。 


Instance.splice ( Index , Count , [Elementl , Element2 ，… , ElementN] ); 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表 示 数 组 对 象 的 实例 ; Index 关键 字 为 必 选 参数 ， 
表示 要 添加 或 移 除 的 数组 元 素 起 始 位 置 ，Count 关键 字 也 为 必 选 参数 ， 表 示 要 移 除 的 数组 
元 素数 量 ， 必 须 为 非 负 整数 ， 为 0 时 表示 不 移 除 任何 元 素 ; Elementl、Element2、ElementN 
等 关键 字 表示 添加 的 数组 元 素 。 例 如 , 在 操作 一 个 包含 中 文字 符 串 “ 喜 ”““ 款 ”“ 伍 ”“ 陆 和 
“ 娄 ” 五 个 元 素 的 数组 时 ， 在 数组 第 二 个 元 素 之 后 、 第 三 个 元 素 之 前 添加 两 个 元 素 “ 会 六 
“ 肆 ”， 代 码 如 下 。 

var arrTest = [ ' 壹 ' ，' 贰 ' ，' 伍 ' ，' 陆 ' ，' 米 ' ] :; 

Aareiest.aplico{( 2 ,0 7 全 

console.log ( arrTest ) ; // 输 出 过 , 贰 ,会 , 肆 , 伍 ,， 陆 ,类 


在 此 需要 说 明 的 是 ，splice0 方 法 的 第 一 个 参数 如 果 为 非 负 整数 ， 则 其 表示 的 是 正 序 的 
数组 元 素 索引 ， 如 果 其 参数 为 负 整数 ， 则 其 表示 倒序 的 数组 元 素 索 引 。 例 如 ， 当 其 值 为 -1 
时 ， 表 示 数 组 中 倒数 第 一 个 元 素 ， 以 此 类 推 。 例 如 ， 在 数组 的 元 素数 未 知 的 情况 下 在 其 末 
尾 追 加 元 素 ， 也 可 以 设置 splice() 方 法 的 第 一 个 参数 为 -1， 如 下 所 示 。 

var arrTest = [' 壹 ' ，' 起 ' ，' 伍 ' ，' 陆 ' ，' 业 ' ] ; 

arrTest .splica( -1 ,0 ，"' 委 ”，" 律 " }) »， 

console.log ( arrTest ) ; // 输 出 壹 ， 起， 伍 ， 陆 ,会 ， 肆 ， 类 

splice() 方 法 除了 可 以 为 数组 添加 元 素 外 ， 也 可 以 删除 数组 中 指定 索引 位 置 的 若干 连续 
的 元 素 ， 并 由 开发 者 自行 选择 是 否 在 删除 元 素 的 同时 添加 一 部 分 元 素 。 例 如 ， 删 除 一 个 包 
含 1、2、3、4、5 五 个 元 素 中 的 3、4 两 个 元 素 ， 代 码 如 下 。 
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a 
arrTest.splice (2 ，2) :; 
console.log ( arrTest ) ; // 输 出 1 ，2 ，5 


如 果 需 要 在 删除 3、4 两 个 元 素 的 同时 在 相同 的 位 置 添加 6、7 两 个 元 素 ， 则 可 以 将 6、 
7 两 个 元 素 作为 splice() 方 法 的 第 三 个 和 第 四 个 参数 书写 ， 代 码 如 下 。 

让 二 

arrTest-splice (2 2 67 了 7 了) 

conseleslog ( arrTest ) 7 // 输 出 1 ，2 .63737575 


6， 移 除数 组 元 素 


除了 之 前 介绍 的 splice0 方 法 外 ，Javascript 还 为 数组 对 象 提供 了 其 他 两 种 实例 方法 以 
移 除数 组 中 的 元 素 ， 这 两 种 实例 方法 就 是 shift0 实 例 方法 和 pop0 实 例 方法 。 

shift() 方 法 的 作用 是 删除 数组 中 的 第 一 个 元 素 , 即 索 引 为 0 的 数组 元 素 , 并 返回 该 元 素 
的 值 ， 其 使 用 方式 如 下 所 示 。 


Instance.shift ( ) ; 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表示 数组 对 象 实例 。shift0 实 例 方法 会 对 数组 对 象 
实例 进行 直接 的 元 素 移 除 操作 , 但 是 其 不 像 unshift0 实 例 方法 一 样 可 以 同时 操作 多 个 元 素 ， 
其 仅 能 对 数组 中 第 一 个 元 素 进 行 移 除 操作 ， 例 如 ， 将 一 个 包含 0、1、2、3、4、5 六 个 元 素 
的 数组 中 第 一 个 元 素 移 除 ， 代 码 如 下 。 

Va ‘Friest = [ OF lo 273 de S13 

console.log ( arrTest.shift ( ) ) ; // 输 出 0 

console.log ( arrTest ) ; // 输 出 1，2，3，4，5 


shift0 实 例 方法 仅 有 在 数组 元 素数 量 大 于 0 时 有 效 ， 如 果 数 组 为 空 ， 则 shift0 实 例 方法 
将 不 会 对 数组 进行 任何 操作 ， 并 返回 一 个 undefined。 

pop0 实 例 方法 的 作用 与 shift0 方 法 完全 相反 ， 其 作用 是 直接 移 除数 组 中 的 最 后 一 个 元 
素 ， 即 索引 为 -1 的 元 素 ， 并 返回 该 元 素 的 值 ， 其 使 用 方式 如 下 所 示 。 


Instance.pop ( ) ;i 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表 示 数 组 对 象 实例 。pop0 实 例 方法 也 会 对 数组 对 
象 实例 进行 直接 的 元 素 移 除 操作 ， 且 仅 能 对 数组 中 最 后 一 个 元 素 进行 移 除 操作 。 例 如 ， 将 
一 个 包含 4、3、2、1、0 五 个 元 素 的 数组 中 最 后 一 个 元 素 移 除 ， 代 码 如 下 。 

a 

console.log ( arrTest.pop ( ) ) ; // 输 出 0 

console.log ( arrTest ) ; // 输 出 4，3 ，2 ，1 


与 shiftO 实 例 方 法 相同 ，popO 实 例 方法 也 仅 有 在 数组 元 素数 量 大 于 0 时 有 效 ， 如 果 数 
组 为 空 ， 则 pop0 实 例 方法 将 不 会 对 数组 进行 任何 操作 ， 并 返回 一 个 undefined。 
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7. 遍历 数组 元 素 


遍历 是 计算 机 软件 开发 中 的 一 个 术语 ， 其 含义 为 通过 指定 的 统一 方式 对 数组 中 所 有 的 
元 素 进行 指定 类 型 的 操作 , 包括 读 取 元 素 的 值 、 对 元 素 的 值 进行 一 定 方式 的 计算 和 写 入 等 。 
遍历 数组 通常 是 一 种 效率 较 低 的 数组 操作 方式 ， 但 是 在 一 些 必须 对 数组 进行 批量 操作 的 场 
合 ， 遍 历 是 一 种 极为 有 效 的 手段 。 

在 Javascript 脚本 语言 中 ， 遍 历数 组 元 素 通常 依赖 for 语句 和 for...in 语句 两 种 迭代 语 
句 来 实现 。 相 比 逐 条 操作 数组 的 每 个 元 素 ， 志 历数 组 元 素 可 以 有 效 地 节约 代码 行 数 ， 并 及 
时 对 裔 历 的 结果 进行 处 理 。 

例如 ， 在 下 面 的 代码 中 ， 就 以 逐条 的 方式 执行 了 一 个 依次 对 数组 中 每 个 元 素 进行 减法 
运算 的 脚本 。 


var arrTest = [1,2 :1 :el 
arrTest [0 ] = arrTest [0]-1;，; 
arrTest [ 1 1] = arrtast [11]=1% 
arrTest [ 2 ] = arrTest [2]-1;，; 
arrTest [ 3 ] = arrTest [3]- 1: 
arrTest [ 4 ] =arrTest [4]-1;，; 


在 上 面 的 代码 中 ， 通 过 五 行 操作 语句 对 数组 的 元 素 进行 操作 。 这 种 方式 虽然 执行 效率 
较 高 ， 但 是 书写 十 分 繁 见 ， 如 果 数 组 元 素 的 数量 较 多 ， 直 接 逐 条 操作 会 得 不 偿 失 ， 此 时 就 
需要 引入 遍历 的 机 制 。 在 下 面 的 代码 中 ， 就 通过 for 语句 的 方式 对 数组 元 素 进 行 遍历 ， 如 
下 所 示 。 

a 矶 三 

for ( var intLoop = 0 ; intLoop < arrTest.length ; intLoop ++ ) { 


arrTest [ intLoop ] -= 1 
} 


当然 , 开发 者 也 可 以 通过 for...in 语句 的 方式 来 对 数组 元 素 进 行 遍历 , 只 需 对 上 面 的 代 
码 略 作 修改 即 可 ， 如 下 所 示 。 


var arrTest = [1,2,3,4,5]; 
for ( var intIndex in arrTest ) { 
arrTest [ intIndex ] -= 1 


} 

8. 数组 元 素 的 排序 

在 默认 状态 下 ，Javascript 的 数组 中 每 个 元 素 都 将 按照 其 设置 或 添加 的 顺序 来 排列 。 当 
数组 的 元 素 均 为 字符 串 ， 或 具有 类 似 字符 串 的 真 值 〈 例 如 数组 元 素 是 数字 、 布 尔 值 等 原始 


类 型 数据 ， 或 为 其 使 用 toString0 方 法 可 以 转换 为 有 效 的 字符 串 值 ) 时 ， 可 以 通过 数组 对 象 
的 sort0 实 例 方法 对 其 按照 字符 编码 的 顺序 进行 排序 ， 其 使 用 方法 如 下 所 示 。 


Instance.sort ( [Method] ) ; 
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在 上 面 的 伪 代 码 中 ，Instance 关键 字 表 示 被 排序 的 数组 ，Method 关键 字 为 可 选 参数 ， 
表示 排序 的 实际 方法 。 当 Method 关键 字 被 省 略 时 ，Javascript 默认 会 按照 数组 元 素 的 字符 
编码 来 对 数据 进行 排序 ， 如 下 所 示 。 


Var arrTest = [3,1, 322,6, 5667 ，4 1] :; 
arrTest.sort () :> 
console.log ( arrTest ) ; // 输 出 1 ，3 ，322 ，4 ，5667 ，6 


由 以 上 代码 可 以 看 出 ，sort( 方 法 在 默认 情况 下 完全 是 对 数组 的 元 素 按照 逐 字 符 的 方式 
排列 ， 数 组 元 素 的 字符 编码 顺序 越 靠 前 ， 则 其 排序 越 优先 。 

如 果 需 要 对 数组 的 元 素 按照 自 定义 的 方式 排序 ， 则 应 针对 排序 的 具体 实现 方式 ， 编 写 
排序 的 方法 函数 , 通过 函数 的 方式 来 处 理 数组 元 素 的 顺序 。 这 种 排序 函数 的 格式 如 下 所 示 。 


function Method ( Argumentl1 , Argument2 ) { 
Statements ; 
return Order ; 


} 


在 上 面 的 伪 代 码 中 , Method 关键 字 表示 排序 方法 的 函数 名 称 ; Argumentl 和 Argument2 
两 个 关键 字 表示 模拟 排序 的 元 素 ，Statements 关键 字 表示 排序 方法 的 函数 代码 ，Order 关键 
字 表 示 返 回 的 排序 值 ， 可 以 是 任意 数字 。 当 Order 关键 字 的 值 大 于 0 时 ， 表 示 Argument1 
元 素 排列 在 Argument2 元 素 之 后 ; 当 Order 关键 字 的 值 为 0 时 表示 不 改变 这 两 个 元 素 的 
当前 顺序 ， 当 Order 关键 字 的 值 小 于 0 时 ， 表 示 Argumentl 元 素 排列 在 Argument2 元 素 
之 前 。 

例如 ， 对 之 前 的 数组 元 素 按照 数字 的 值 的 大 小 以 升序 的 方式 进行 排列 ， 就 需要 在 排序 
方法 的 函数 中 判断 两 个 参数 的 大 小 ， 判 断 当 第 一 个 参数 大 于 第 二 个 参数 时 输出 正 值 ， 当 第 
一 个 参数 小 于 第 二 个 参数 时 输出 负 值 ， 代 码 如 下 。 

function SortForASC ( intElement1l , intElement2 ) { 

return intElementl1 - intElement2 ; 

} 

War ArrTest = [3 .5 1 35. 322 7 © 7 S667 7 1 3 

arrTest.sort ( SortForASC ); 

console.1log ( arrTest ) ; // 输 出 1 ,3, 4, 6， 322, 5667 


除了 设 定 条 件 进行 排序 外 ，Javascript 也 支持 直接 对 数组 的 所 有 元 素 顺序 进行 倒置 ， 其 
需要 使 用 到 数组 的 reverse0 实 例 方法 ， 代 码 如 下 。 
Instance -TeVerse ( ) : 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表示 数组 对 象 实例 的 名 称 。 通 过 该 方法 ， 可 以 直 
接 对 数组 实例 进行 操作 ， 例 如 ， 将 一 个 包含 1、2、3、4、5 五 个 元 素 的 数组 进行 倒置 ， 代 
码 如 下 。 


i rt = 
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arrTest.reverse ( ) ; 
console.log ( arrTest ) ; // 输 出 5 ，4，3 ，2 ，1 


9. 检索 数组 元 素 


Javascript 脚本 语言 为 数组 对 象 提 供 了 两 种 简单 的 数组 元 素 检索 方法 , 用 于 对 数组 的 元 
素 进行 完全 匹配 ， 并 返回 第 一 个 匹配 的 结果 。 这 两 种 方法 即 数组 对 象 的 indexOf() 实 例 方法 
和 lastIndexOf0) 实 例 方法 。 

indexOf0 实 例 方法 的 作用 是 读 取 一 个 变量 或 对 象 ， 然 后 从 指定 的 索引 位 置 开始 从 前 到 
后 依次 对 数组 中 每 一 个 元 素 进行 匹配 ， 直 至 找 出 一 个 与 该 变量 或 对 象 完全 匹配 的 元 素 〈 匹 
配 的 项 目 包括 元 素 的 值 和 数据 类 型 )， 然 后 返回 该 元 素 在 数组 中 的 索引 ， 其 使 用 方式 如 下 
所 示 。 


Instance.indexOf ( KeyWord , FromIndex ) ; 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表 示 数 组 对 象 的 实例 ; KeyWord 关键 字 为 必 选 参 
数 ， 表 示 需 要 匹配 的 变量 和 对 象 ，FromIndex 关键 字 为 可 选 参数 ， 表 示 开 始 匹 配 的 索引 号 。 

indexOfO 实 例 方法 在 匹配 数组 元 素 时 会 出 现 三 种 异常 状况 : 一 种 是 数组 元 素数 量 为 0， 
即 数组 为 空 ， 另 一 种 是 无 法 和 数组 中 任意 一 个 元 素 匹 配 成 功 ， 再 一 种 则 是 开始 匹配 的 索引 
号 大 于 数组 的 长 度 。 匹配 时 如 遇 到 这 三 种 异常 状况 , indexOfO 实 例 方法 的 返回 值 都 会 是 -1。 

例如 ， 在 一 个 包含 1、2、3、4、5 五 个 数字 的 数组 中 检索 数字 3， 将 返回 结果 2; 如 
果 将 起 始 检索 的 索引 设置 为 3， 则 返回 数字 -1; 如 果 检 索 数字 6， 同 样 会 返回 数字 -1; 如 
果 在 检索 数字 3 时 设置 检索 的 起 始 索 引 为 9， 仍 然 会 返回 数字 -1， 代 码 如 下 。 


War BrrTest S127 3 4 5 

console.log ( arrTest.indexof ( 3 ) ) ; // 输 出 2 
console.log ( arrTest.indexof ( 3，3 ) ) ; // 输 出 -1 
console.log ( arrTest.indexof ( 6 ) ) ; // 输 出 -1 
console.log ( arrTest.indexof (3 ，9 ) ) ; // 输 出 -1 


indexOf0 实 例 方法 是 从 数组 的 起 始 元 素 开始 进行 匹配 ，lastIndexOf0) 实 例 方法 则 与 
indexOf0) 实 例 方法 完全 相反 ， 其 作用 是 倒 着 对 数组 的 元 素 进行 匹配 ， 然 后 返回 数组 中 最 后 
一 个 与 该 变量 或 对 象 匹配 的 元 素 的 索引 。 其 使 用 方式 大 体 与 indexOf0 实 例 方法 类 似 ,在 此 
不 再 歼 述 。 

10. 合并 数组 


Javascript 为 数组 元 素 提供 了 concat0 实 例 方法 ， 用 于 将 若干 数组 的 所 有 元 素 按照 指定 
的 顺序 合并 ， 返 回 一 个 全 新 的 数组 对 象 实例 ， 实 现 数组 的 连接 ， 其 使 用 方法 如 下 所 示 。 


Instancel.concat ( Instance2 , Instance3 ，… InstanceN ) ; 


在 上 面 的 伪 代 码 中 ，Instancel、Instance2、Instance3、InstanceN 等 关键 字 表 示 按 照 顺 
序 排列 的 数组 对 象 实例 。concat0 实 例 方法 不 会 改变 原 有 数组 的 内 容 ， 只 会 返回 一 个 新 的 数 
组 实例 。 例 如 ， 分别 将 一 个 包含 数字 1、2、3 的 数组 ， 包 含 数字 4、5 的 数组 以 及 包含 数字 
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6 的 三 个 数组 合并 ， 代 码 如 下 。 


Var arrTestl1 


var arrTest2 


[ 
[ 
var arrTest3 [ 
V4 EE 


console.log ( arrTestl.concat ( arrTest2 , arrTest3 ) ); 


concat0 实 例 方法 不 限制 参数 的 数量 , 因此 其 可 以 将 任意 数量 的 数组 按照 顺序 合并 为 一 
个 新 的 数组 。 


11. 拼接 数组 


之 前 小 节 中 已 介绍 过 将 字符 串 对 象 实例 拆 分 为 数组 的 split0 实 例 方法 ，Javascript 还 提 
供 了 一 个 与 之 完全 相反 的 join0 实 例 方法 , 其 从 属于 数组 对 象 , 用 于 将 数组 的 所 有 元 素 转换 
为 字符 串 ， 然 后 通过 指定 的 分 隔 符 将 这 些 字符 串 合 并 为 一 个 新 的 字符 串 ， 其 使 用 方法 如 下 
所 示 。 


String = Instance.join ( Seperator ) ; 


在 上 面 的 伪 代 码 中 ，String 关键 字 表示 拼接 数组 的 结果 字符 串 实例 ，Instance 关键 字 表 
示 目 标 数组 对 象 实例 ，Seperator 关键 字 为 可 选 参数 ， 表 示 拼 接 后 每 个 数组 元 素 的 字符 串 结 
果 之 间 的 分 隔 符 ， 如 将 其 省 略 ， 则 默认 以 英文 逗号 “,” 作 为 分 隔 符 。 

例如 ， 将 一 个 包含 “Tsinghua”、“University” 和 “Press” 三 个 字符 串 的 数组 拼接 为 一 
个 字符 串 ， 代 码 如 下 。 


var strPublisherName = '' ，; 

var arrTest = [ 'Tsinghua' , 'University' , "Press' ] ; 
strPublisherName = arrTest.join ( ) ; 

console.log ( strPublisherName ) ; // 输 出 “Tsinghua,University,Press” 


如 果 需 要 将 拼接 结果 中 的 逗号 “,” 修 改 为 空格 ， 则 可 以 将 一 个 空格 字符 串 作 为 join0 
实例 方法 的 参数 ， 对 代码 进行 修改 ， 如 下 所 示 。 


var strPublisherName = '' ，; 

Var arrTest = [ 'Tsinghua' ， "University' ， "Press' ] ; 
strPublisherName = arrTest.join (' ' ) 

console.log ( strPublisherName ) ; // 输 出 “Tsinghua University Press” 


join0 实 例 方法 在 拼接 数组 元 素 时 ， 会 先 一 步 强制 将 数组 中 的 所 有 元 素 转 换 为 字符 串 ， 
然后 再 进行 拼接 工作 。 


5.3.4 正则 表达 式 对 象 


正则 表达 式 是 计算 机 软件 开发 领域 的 一 种 重要 工具 ， 其 本 身 是 一 种 特殊 的 句法 规则 组 
成 的 字符 串 ， 通 过 这 一 字符 串 ， 开 发 者 可 以 对 普通 的 文本 数据 进行 匹配 和 验证 ， 确 认 文 本 
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数据 内 容 的 书写 格式 。Javascript 与 绝 大 多 数 编程 语言 一 样 支持 正则 表达 式 工具 ， 并 将 所 有 
正则 表达 式 视 为 一 种 特殊 的 对 象 一 一 RegExp。 使 用 正则 表达 式 对 象 ， 开 发 者 可 以 验证 字符 
串 对 象 的 内 容 类 型 ， 实 现 书 写 格式 验证 。 


1. 创建 正则 表达 式 实例 


在 Javascript 中 ， 开 发 者 可 以 通过 两 种 方式 创建 正则 表达 式 实例 ， 一 种 是 以 类 似 原始 
数据 类 型 的 方式 建立 正则 表达 式 ， 将 正则 表达 式 作为 值 赋予 对 象 ， 方 式 如 下 。 


var Instance = /Pattern/Tag ; 

在 上 面 的 伪 代 码 中 ，Instance 关键 字 表 示 正 则 表达 式 实例 的 名 称 ，Pattem 关键 字 表示 
正则 表达 式 的 规则 字符 串 ，Tag 关键 字 表 示 正 则 表达 式 匹配 的 标志 。Tag 关键 字 支 持 g、i 
和 m 三 种 值 ， 分 别 指定 全 局 匹配 、 区 分 大 小 写 匹配 以 及 多 行 匹 配 ， 其 中 g 和 1i 两 种 标志 目 
前 被 ECMAScript 标准 支持 。 

例如 , 定义 一 个 用 于 验证 小 写字 母 的 正则 表达 式 , 可 以 编写 匹配 小 写字 母 的 验证 规则 ， 
再 使 用 i 属性 定义 匹配 方式 ， 代 码 如 下 。 

var reSingleLowerCase = /^[a-z]$/i ; 

除了 使 用 直接 赋值 的 方式 创建 正则 表达 式 实例 外 ， 开 发 者 还 可 以 通过 调用 正则 表达 式 
类 构造 函数 的 方式 创建 正则 表达 式 ， 方 式 如 下 。 

var Instance = new RegExp ( Pattern , Tag) ; 

在 上 面 的 伪 代 码 中 ，Instance 关键 字 表 示 正 则 表达 式 实例 的 名 称 ; Pattem 关键 字 表示 
正则 表达 式 的 规则 字符 串 ，Tag 关键 字 表示 正则 表达 式 的 匹配 标志 。 例 如 ， 用 这 一 方式 来 
创建 验证 小 写字 母 的 正则 表达 式 ， 代 码 如 下 。 

var reSingleLowerCase = new RegExp ( '^[a-z]$' ,，'i' ) : 

需要 注意 的 是 ，Javascript 是 一 种 区 分 大 小 写 的 编程 语言 ， 因此 RegExp() 构 造 函 数 不 能 
被 书写 为 Regexp()。 


2. 普通 字符 规则 

在 正则 表达 式 中 ， 开 发 者 可 以 通过 字母 、 数 字 、 汉 字 、 下 划 线 以 及 各 种 没有 特殊 意义 
的 标点 符号 等 普通 字符 直接 与 字符 串 中 的 内 容 进 行 匹配 ， 获 取 匹 配 结果 。 例 如 ， 匹 配 字母 
a， 可 以 通过 以 下 的 正则 表达 式 实现 ， 代 码 如 下 。 


var reCharacterA = /a/ :; 
与 上 面 的 方式 类 似 ， 汉 字 、 数 字 等 普通 字符 也 可 以 直接 通过 正则 表达 式 进 行 匹配 ， 代 
人 码 如 下 。 


Var reNumberNine = /9/ ; 


var reChineseCharacterHan = / 汉 / ; 
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3. 字符 范围 规则 


如 果 需 要 对 一 个 指定 的 范围 编写 正则 表达 式 规则 ， 则 开发 者 可 以 指定 一 个 范围 将 其 列 
入 正则 表达 式 的 规则 中 ， 然 后 Javascript 将 自动 使 用 指定 的 范围 进行 匹配 。Javascript 提供 
了 两 种 匹配 字符 范围 的 规则 ， 一 种 是 通过 元 字符 蔡 代 字符 范围 ， 另 一 种 则 是 通过 中 括号 运 
算 符 整合 所 有 匹配 的 字符 。 
元 字符 是 正则 表达 式 为 匹配 一 些 常 用 字符 范围 而 设 定 的 具有 特定 含义 的 字符 ， 目 前 
Javascript 支持 18 种 基础 的 元 字符 ， 如 表 5-6 所 示 。 


表 5-6 正则 表达 式 的 元 字符 


元 字符 ”匹配 范围 匹配 范围 

8 除 换行 符 和 行 结束 符 以 外 所 有 单个 字符 拉丁 字母 字符 

Ww 非 拉 丁字 母 字 符 数字 

\D 非 数字 空白 字符 

\S 非 空白 字符 单词 边界 

B 非 单词 边界 NUL 字符 

un 换行 符 分 页 符 

Y 回 车 符 制 表 符 

Ww 垂直 制 表 符 八进制 数字 对 应 的 编码 字符 (ASCIT) 
\xdd 上 六 进 制 数字 对 应 的 编码 字符 (ASCIT) 十 六 进 制 数字 对 应 的 编码 字符 


(Unicode) 


元 字符 匹配 的 通常 是 一 大 类 的 字符 ， 例 如 拉丁 字母 、 数 字 或 一 些 特殊 作用 的 字符 ， 如 
换行 符 和 制 表 符 等 。 例 如 ， 创 建 一 个 匹配 数字 字符 的 正则 表达 式 ， 代 码 如 下 。 

var reNumber = /Nd/ : 

元 字符 只 能 匹配 少数 限定 的 字符 类 型 ， 因 此 如 果 需 要 匹配 特定 的 字符 ， 可 以 使 用 中 括 
号 运算 符 将 特定 字符 整合 起 来 。 正则 表达 式 允 许 通过 以 下 几 种 方式 建立 范围 匹配 , 如 表 5-7 


所 示 。 
表 5-7 正则 表达 式 范围 匹配 的 方法 
格式 作用 示例 
[abc] 匹配 中 括号 之 间 的 任意 字符 [ 壹 贰 人 参 肆 伍 陆 类 撞 玖 拾 ] 
[Aabc] 匹配 非 中 括号 之 间 的 任意 字符 区 一 三 三 四 五 六 七 开 万 要 
[0-9] 匹配 数字 字符 - 
[a-z] 匹配 小 写 拉丁 字母 - 
[A-Z] 匹配 大 写 拉 丁字 母 - 
[A-z] 匹配 大 写 或 小 写 拉丁 字母 - 


[uxxxx-uxxxx] 


匹配 指定 字符 编码 范围 之 间 的 任意 字符 


[woool-0090] 


使 用 范围 匹配 可 以 匹配 更 多 个 性 化 的 内 容 ， 包 括 指定 的 几 个 字符 ， 或 是 在 字符 集 编码 
(例如 UTF-8 编码 等 ) 中 带 有 一 定 序列 顺序 的 连续 字符 等 。 例 如 ， 匹 配 中 文字 符 ， 即 可 通 
过 中 文字 符 在 Unicode 编码 字符 集中 的 编码 范围 实现 ， 如 下 所 示 。 
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var reZhCNChar = /[\u4e00-\u9fa5]/ ; 

对 范围 匹配 和 元 字符 的 灵活 使 用 ， 可 以 方便 开发 者 实现 更 加 广泛 的 匹配 性 能 。 例 如 ， 
一 些 Web 站 点 要 求 注册 账户 必须 是 拉丁 字母 (区 分 大 小 写 ) 和 下 划 线 的 形式 , 在 下 面 的 代 
码 中 ， 就 实现 了 这 种 匹配 。 

var reValidChar = /[A-z ]/ 

4. 定义 匹配 次 数 

正则 表达 式 允许 开发 者 对 某 一 个 字符 规则 或 一 个 字符 范围 规则 进行 匹配 次 数 的 定义 ， 
通过 制定 的 量词 规则 来 定义 这 些 字符 允许 出 现 的 次 数 。 在 Javascript 中 ， 支 持 六 种 量词 规 
则 ， 如 表 5-8 所 示 。 


表 5-8 正则 表达 式 的 量词 规则 


量词 规则 作用 示例 示例 作用 

TI 匹配 字符 规则 至 少 一 次 ， 相 当 于 {1,} [ON]+ 任意 二 进 制 数字 

I 匹配 字符 规则 为 0 次 或 更 多 , 相当 于 {0,} [1-9]\d* 任意 自然 数 

三 匹配 字符 规则 为 0 次 或 1 次 ,相当 于 {0,1}  [-]?[1-9]\d* 任意 自然 数 和 负 整 数 
r{X} 匹配 字符 规则 为 指定 的 义 次 \d{6} 邮政 编码 

EY} 匹配 字符 规则 至 少 和 次 ， 至 多 立 次 [0-9]{3,4} 长 途 电 话 区 号 

EX 匹配 字符 规则 至 少 X 次 ， 至 多 无 限 次 [wu4E00-vu9FA5]{2,} ”中文 姓名 


量词 规则 的 应 用 可 以 通过 匹配 次 数 的 限制 ， 缩 短 正则 表达 式 规则 的 长 度 ， 有 效 地 提高 
正则 表达 式 书写 的 效率 , 同时 其 也 在 各 种 复杂 的 规则 验证 中 使 正则 表达 式 的 规则 更 加 灵活 ， 
提高 了 正则 表达 式 的 易 用 性 。 


5. 匹配 限制 


正则 表达 式 提供 了 两 个 限制 符号 用 于 对 匹配 规则 的 起 始 和 结束 标记 进行 限制 ， 即 起 始 
限制 符号 “^” 和 结束 限制 符号 “$”。 

起 始 限制 符号 “^” 的 作用 是 强制 限定 正则 表达 式 从 被 匹配 的 文本 内 容 起 始 位 置 开 始 匹 
配 ， 其 使 用 方式 如 下 。 


/^Pattern/ 


在 上 面 的 伪 代 码 中 ，Pattem 关键 字 表示 匹配 的 规则 代码 。 起 始 限制 符号 “^” 必 须 被 
书写 在 正则 表达 式 规则 的 起 始 位 置 才 有 效 。 例 如 ， 在 匹配 手机 号 码 时 ， 由 于 国内 所 有 手机 
号 码 都 是 以 13、15、18 开头 的 ， 因 此 在 匹配 这 一 特殊 格式 的 数据 时 ， 必 须 通 过 起 始 限 制 符 
号 强制 规定 文本 内 容 只 有 以 这 三 种 数字 字符 为 起 始 字 符 时 才 有 效 ， 如 下 所 示 。 

var reCellPhoneNumber = /^1[31518]\d{9}/ ; 

在 上 面 的 代码 中 ， 就 通过 起 始 限制 符号 “^” 强 制 对 文本 内 容 的 起 始 位 置 的 11 个 字符 
进行 匹配 ， 验 证 这 段 文本 起 始 的 内 容 是 否 符合 手机 号 码 的 格式 。 

结束 限制 符号 “$” 的 作用 是 强制 限定 正则 表达 式 的 匹配 范围 直至 被 匹配 的 文本 内 容 
末尾 ， 其 使 用 方式 与 起 始 限制 符号 “^” 的 使 用 方式 类 似 ， 如 下 所 示 。 
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/Pattern$/ 


在 上 面 的 伪 代 码 中 ，Patterm 关键 字 表示 匹配 的 规则 代码 。 结 束 限制 符号 “$” 必 须 被 
书写 在 正则 表达 式 规 则 的 末尾 位 置 才 有 效 。 例 如 ， 之 前 的 匹配 手机 号 码 的 正则 表达 式 规则 
只 能 验证 文本 起 始 的 11 个 字符 是 否 为 手机 号 码 格 式 ， 在 为 其 添加 了 结束 限制 符号 “$” 之 
后 ， 就 可 以 对 文本 内 容 进行 完整 地 匹配 ， 当 且 仅 当 整个 文本 内 容 只 包括 11 位 数字 ， 且 以 
13、15、18 三 种 数字 开头 才 有 效 ， 代 码 如 下 。 


var reCellPhoneNumber = /^1[31518]\df9}S/ ; 


6. 匹配 验证 


在 Javascript 脚本 语言 中 ， 开 发 者 可 以 通过 两 种 方式 验证 正则 表达 式 对 象 实例 与 字符 
串 对 象 实例 是 否 匹 配 。 一 种 是 通过 字符 串 对 象 的 matchO 实 例 方法 ， 另 一 种 则 是 使 用 正则 表 
达 式 对 象 的 test0 实 例 方法 。 

字符 串 对 象 的 matchO 实 例 方法 的 作用 是 , 根据 开发 者 定义 的 字符 串 或 正则 表达 式 在 目 
标 字 符 串 中 进行 匹配 ， 返 回 由 匹配 的 内 容 组 成 的 数组 或 null。 其 使 用 方式 如 下 。 


Result = StringInstance.match ( Keyword|RegExpInstance ) ; 


在 上 面 的 伪 代 码 中 , Result 关键 字 表 示 获 取 的 匹配 内 容 组 成 的 数组 对 象 ; StringInstance 
关键 字 表示 被 匹配 的 字符 串 对 象 实例 ，Keyword 关键 字 和 RegExpInstance 关键 字 必 须 二 选 
一 ， 其 表示 匹配 的 字符 串 内 容 ，RegExpInstance 关键 字 表示 匹配 的 正则 表达 式 对 象 。 

例如 ， 对 一 个 由 五 位 字母 和 数字 组 成 的 软件 序列 号 字符 串 进行 处 理 ， 可 以 将 其 中 的 五 
位 字符 串 片 段 提取 到 数组 中 ， 代 码 如 下 。 

Var strSN = 'QX8TY-Q3B26-7KNB3-DFAR9-MP9E3' ; 

var reSerial = /[A-20-9] {5}/g ; 

Var arrSerials = strSN.match ( reSerial ) ; 


console.1log ( arrSerials ) ; // 输 出 QX8TY,Q3B26,7KNB3,DFRR9,MP9E3 
console.log ( arrSerials.length ) ; // 输 出 5 


字符 串 对 象 的 matchO 实 例 方法 适用 于 将 字符 串 中 符合 正则 表达 式 的 数据 内 容 提取 出 
来 进行 处 理 。 在 判断 某 个 字符 串 是 否 与 一 个 正则 表达 式 匹配 时 ， 可 以 通过 判断 输出 的 结果 
是 否 为 null 来 实现 。 例如， 对 以 上 代码 中 的 正则 表达 式 规则 进行 修改 ， 验 证 其 是 否 符合 五 
位 字母 和 数字 组 成 的 软件 序列 号 格式 ， 如 下 所 示 。 


var strSN5 = 'QX8TY-Q3B26-7KNB3-DFAR9-MP9E3' ; // 五 位 序列 号 
var strSN6 = 'QX8TY1-Q3B262-7KNB33-DFAR94-MP9E35' ; // 六 位 序列 号 
var reSerial5 = /^([A-20-9]{5}-) {4} [A-Z0-9]{5}1$/g ; // 五 位 序列 号 的 格式 规则 


Var arrSerials5 = strSN5.match ( reSerial5 ) ; 


Var arrSerials6 = strSN6.match ( reSerial5 ) > 


if ( null !== arrSerials5 ) { 
console.log ( strSN5 + ' 是 五 位 序列 号 ' ) ; 
} else { 


console.log ( strSN5 + ' 不 是 五 位 序列 号 ' ) ; 
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} 


3 mull I== FESecials6 } { 
console.log ( strSN6 +' 是 五 位 序列 号 " ) ; 
} else { 


console.log ( strSN6 + ' 不 是 五 位 序列 号 ' ) ; 
} 


执行 以 上 代码 ，Javascript 会 输出 第 一 个 变量 是 五 位 序列 号 , 第 二 个 变量 不 是 五 位 序列 
号 的 结果 。 在 此 需要 注意 的 是 ， 由 于 null 是 一 种 特殊 的 值 ， 其 与 很 多 特殊 值 的 直接 比较 存 
在 有 空 比较 陷阱 , 因此 除非 某 个 值 确实 是 null, 否则 应 尽量 避免 这 种 比较 ,或 使 用 全 等 “一 =” 
和 全 不 等 “!==” 的 方式 进行 比较 (尽管 这 种 方式 不 够 优雅 )。 

解决 以 上 问题 ， 最 好 的 方式 就 是 通过 正则 表达 式 对 象 的 test0 实 例 方法 来 测试 字符 串 
是 否 匹 配 。test0 方 法 是 一 种 完全 的 判断 方法 ， 其 返回 的 值 为 逻辑 真 或 逻辑 假 ， 使 用 方式 
如 下 。 


Result = Instance.test ( StringInstance ) ; 


在 上 面 的 伪 代 码 中 , Result 关键 字 表示 验证 匹配 的 结果 ; Instance 关键 字 表示 用 于 匹配 
测试 的 正则 表达 式 对 象 实例 ，String 关键 字 表示 测试 的 目标 字符 串 。 例 如 ， 验 证 某 个 字符 
串 是 否 为 中 国 汉族 人 的 习惯 姓名 (两 到 四 个 中 文字 符 组 成 的 字符 串 ), 可 以 通过 以 下 代码 实 
现 ， 如 下 所 示 。 


var strChineseName =' 阁 应 元 ' ，; 
var strEnglishName = "Bill Gates' ; 
function CheckName ( strName ) { 
Var reChineseName = /^[\u4E00-\u9FAS]{2,4}$/ ; 
if ( reChineseName.test ( strName ) ) { 
console.1og ( strName + ' 是 中 国 汉族 人 习惯 姓名 。' ) : 
} else { 
console.1og ( strName + ' 不 是 中 国 汉 族人 习惯 姓名 。' ) ; 
} 
} 
CheckName ( strChineseName ) ; // 输 出 向 应 元 是 中 国 汉 族人 习惯 姓名 。 
CheckName ( strEnglishName ) ; // 输 出 Bill] Gates 不 是 中 国 汉族 人 习惯 姓名 。 


7. 匹配 检索 

正则 表达 式 的 另 一 项 重要 功能 是 为 字符 串 的 检索 提供 规则 依据 ， 帮 助 开发 者 在 字符 串 
对 象 实例 的 内 容 中 获取 指定 格式 或 内 容 的 字符 串 片 段 ， 并 返回 该 字符 串 片段 在 整个 字符 串 
对 象 实例 中 第 一 个 符合 正则 表达 式 规则 的 字符 串 片 段 的 索引 位 置 。 

在 使 用 正则 表达 式 进行 匹配 检索 时 , 需要 使 用 到 字符 串 对 和 象 的 searchO 实 例 方法 ,其 使 
用 方式 如 下 所 示 。 


ResultIndex = StringInstance.search ( RegExpInstance ) ; 
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在 上 面 的 伪 代 码 中 ，ResultIndex 关键 字 表 示 在 目标 字符 串 对 象 实例 中 第 一 个 匹配 的 字 
符 串 片段 的 首 字符 索引 位 置 ; StringInstance 关键 字 表示 目标 字符 串 对 象 实例 ; 
RegExpInstance 关键 字 表示 匹配 的 正则 表达 式 实例 。 

需要 注意 的 是 ,字符 串 对 象 的 search0 实 例 方法 只 能 从 字符 串 的 起 始 位 置 向 末尾 位 置 以 
正 向 检索 匹配 , 且 只 能 返回 第 一 个 匹配 成 功 的 字符 串 片段 的 首 字 符 索 引 , 如 果 匹 配 失败 (如 
正则 表达 式 规 则 无 效 ， 或 未 检索 到 结果 )， 则 该 方法 会 返回 -1。 

利用 字符 串 对 象 的 searchO 实 例 方法 ,开发 者 可 以 方便 地 判断 某 个 字符 串 对 象 实例 的 文 
本 内 容 中 是 否 包含 指定 格式 或 指定 内 容 的 字符 串 片段 。 例 如 ， 判 断 “Javascript” 字 符 串 中 
是 否 包含 “script” 字 符 串 片段 ， 代 码 如 下 。 


var strTest = 'Javascript' ; 
Var reTest = /script/ ; 


if ( -1 !== strTest.search ( reTest ) ) { 
console.1og (“' 检 索 成 功 ' ) ; 
} else { 


console.1og (“检索 失 败 ' ) : 
} // 输 出 检索 成 功 


字符 串 对 象 的 search0 实 例 方法 不 会 执行 全 局 匹配 , 因此 其 对 应 的 匹配 规则 正则 表达 式 
实例 如 果 包 含 g 标志 ， 则 该 标志 将 会 被 忽视 。 


8. 匹配 替换 


很 多 文本 编辑 软件 都 提供 文本 内 容 替 换 工 具 ，Javascript 实际 上 也 可 以 实现 类 似 的 功 
能 ， 这 就 是 正则 表达 式 对 象 的 另 一 种 重要 作用 一 一 匹配 替换 。 匹 配 替 换 可 为 字符 串 实例 
提供 规则 匹配 并 蔡 换 符合 该 规则 的 内 容 ， 其 需要 依赖 字符 串 对 象 的 replace0 实 例 方法 来 
实现 。 

字符 串 对 象 的 replace0 方 法 需要 引入 两 种 参数 ， 一 种 是 匹配 的 正则 表达 式 对 象 实例 ， 
另 一 种 则 是 将 要 替换 的 新 字符 串 片段 ， 其 使 用 方式 如 下 。 


ResultString = StringInstance.replace ( RegExpInstance/Tag , Text ) ; 


在 上 面 的 伪 代 码 中 ，ResultString 关键 字 表示 匹配 替换 之 后 的 结果 字符 串 片段 ; 
StringInstance 关键 字 表 示 被 匹配 替换 的 目标 字符 串 对 象 实例 ，RegExpInstance 关键 字 表 示 
匹配 的 正则 表达 式 规则 ;，Tag 关键 字 表示 对 应 正则 表达 式 的 匹配 标志 ; Text 关键 字 表示 需 
要 替换 的 新 字符 串 片 段 。 

需要 注意 的 是 ，replace0 实 例 方法 与 所 有 字符 串 对 象 的 方法 一 样 ， 都 是 只 读 方 法 ， 其 
不 会 直接 改变 目标 字符 串 对 象 实例 的 内 容 ， 只 会 返回 一 个 新 的 字符 串 对 象 实例 。 

例如 ， 对 一 个 包含 “VBScript” 的 字符 串 进 行 匹配 替换 操作 ， 将 “VB ”替换 为 “Java”， 
代码 如 下 。 


var reVisualBasic = /VB/ ; 


Var strScript = 'VBScript' ; 
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Var strNewScript = strScript.replace ( reVisualBasic ， 'Java' ) : 
console.1og ( strNewScript ) ; // 输 出 Javascript 


5.4 小 结 


Javascript 是 一 种 典型 的 面向 对 象 的 脚本 语言 ， 因 此 了 解 面向 对 象 的 程序 设计 ， 用 面向 
对 象 的 思维 方式 来 设计 Javascript 程序 是 十 分 重要 的 。 如 何 用 面向 对 象 的 思维 方式 来 设计 
Javascript 程序 呢 ? 首先 需要 了 解 面 向 对 象 的 基础 知识 ， 同 时 还 需要 了 解 Javascript 各 种 面 
向 对 象 开 发 的 具体 方式 。 因 此 ， 本 章 首先 简单 介绍 了 面向 过 程 的 理念 ， 然 后 通过 对 比 的 方 
式 介绍 了 面向 对 象 的 程序 设计 需要 如 何 处 理 各 种 实体 。 紧 接着 ， 由 理论 联系 实际 ， 介 绍 了 
具体 的 Javascript 面向 对 象 开发 的 各 种 要 素 ， 如 原型 对 象 、 工 厂 函 数 、 构 造 函 数 、 类 和 对 
象 的 成 员 ， 以 及 对 象 的 作用 域 等 ， 为 帮助 开发 者 进一步 了 解 Javascript 面向 对 象 的 程序 编 
写 打下 基础 。 之 后 ， 本 章 还 介绍 了 Javascript 的 四 种 原生 对 象 。 了 解 了 本 章 的 内 容 之 后 ， 
开发 者 就 可 以 利用 Javascript 提供 的 最 基本 的 资源 ， 编 写 一 些 简单 的 脚本 程序 。 
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Javascript 是 一 种 基于 Web 浏览 器 和 Web 页 的 脚本 语言 ， 其 主要 的 作用 就 是 操作 各 种 
Web 页 内 的 资源 ， 实 现 与 用 户 的 交互 。 因 此 ， 在 学 习 和 使 用 Javascript 脚本 语言 时 ， 开 发 
者 除了 需要 了 解 Javascript 本 身 以 外 ,还 需要 了 解 Web 浏览 器 提供 的 各 种 对 象 以 及 XHTML 
和 HIML 提供 的 DOM 对 象 ， 然 后 才能 对 这 些 对 象 进行 处 理 。 

另外 ， 绝 大 多 数 Javascript 脚本 的 交互 都 是 基于 事件 式 的 行为 ， 因 此 在 使 用 Javascript 
开发 程序 时 ， 开 发 者 还 需要 了 解 Javascript 事件 处 理 的 原理 以 及 方式 。 

本 章 就 将 立足 于 之 前 章节 介绍 的 Javascript 基础 知识 和 Javascript 面向 对 象 的 开发 知 
识 ， 详 细 介 绍 Web 浏览 器 对 象 、XHTML 或 HTML 文档 对 象 模型 ， 以 及 Javascript 事件 的 
处 理 等 知识 ， 完 善 地 解决 Javascript 实际 开发 中 的 问题 。 


6.1 Web 浏览 器 对 象 


Javascript 将 所 有 可 操控 的 元 素 都 视 为 对 象 , 其 除了 包括 Javascript 各 种 内 置 的 对 象 外 ， 
还 包括 Web 浏览 器 自身 。 各 种 Web 浏览 器 都 为 Javascript 提供 了 共同 的 接口 ， 允 许 开发 者 
通过 Javascript 控制 Web 浏览 器 执行 命令 继而 实现 交互 。 目 前 ， 绝 大 多 数 Web 浏览 器 都 支 
持 的 Web 浏览 器 对 象 主要 包括 五 种 ， 即 窗口 对 象 window、 浏 览 器 对 象 navigator、 屏 幕 对 
象 screen、 历 史记 录 对 象 history 和 定位 对 象 location 。 


6.1.1 窗口 对 象 


window 窗口 对 象 是 Javascript 层 级 中 的 顶层 对 象 ,也 是 所 有 Javascript 中 的 对 象 的 基 类 。 
所 有 Javascript 中 的 全 局 对 象 、 全 局 变量 和 全 局 函数 都 会 被 挂 载 到 该 对 象 上 。 虽 然 并 没有 
一 个 国际 化 的 组 织 对 窗口 对 象 定 义 一 个 通用 的 统一 标准 , 但 是 所 有 Web 浏览 器 都 支持 该 对 
象 ， 并 允许 开发 者 调用 该 对 象 的 成 员 。 通 过 window 对 象 的 各 种 属性 和 方法 ， 开 发 者 可 以 
实现 以 下 功能 。 


1. 获取 窗口 位 置 
window 窗口 对 象 提供 了 四 个 静态 属性 ,用 于 帮助 开发 者 获取 窗口 在 操作 系统 屏幕 上 的 
相对 水 平 位 置 和 垂直 位 置 ， 如 表 6-1 所 示 。 


表 6-1 窗口 对 象 的 位 置 属性 
属性 名 作用 适用 浏览 器 
screenLeft 定义 窗口 的 左上 角 位 置 距离 屏幕 左 侧 的 水 平 距 离 ， 单 位 为 像素 ” 正 、Safari 和 Opera 
screenTop 定义 窗口 的 左上 和 角 位 置 距离 屏幕 项 端的 垂直 距离 ， 单 位 为 像素 


第 6 章 ”Web 对 象 和 交互 217 


属性 名 作用 适用 浏览 器 
screenX 定义 窗口 的 左上 角 位 置 距 离 屏 幕 左 侧 的 水 平 距离 ， 单 位 为 像素 ”Firefox 和 Safari 
screenY 定义 窗口 的 左上 角 位 置 距离 屏幕 项 端的 垂直 距离 ， 单 位 为 像素 


表 6-1 中 的 这 四 种 属性 都 是 静态 只 读 属性 ， 也 就 是 说 ， 开 发 者 只 能 对 这 四 种 属性 的 值 
进行 读 取 操作 ， 无 法 进行 写 入 操作 。 其 中 ，screenLeft 属性 和 screenX 属性 的 作用 是 完全 相 
同 的 ，screenTop 属性 和 screenY 属性 的 作用 也 是 完全 相同 的 ， 其 区 别 在 于 ， 除 Safari 浏览 
器 之 外 ,所 有 Web 浏览 器 都 只 支持 这 四 种 属性 中 的 两 种 :正和 Opera 浏览 器 支持 screenLeft 
和 screenTop 两 种 属性 ，Firefox 浏览 器 支持 screenX 和 screenY 两 种 属性 。 


2. 输出 提示 信息 


window 窗口 对 象 提供 了 三 种 静态 方法 用 于 输出 提示 信息 ， 包 括 alert0 方 法 、confirm() 
方法 以 及 prompt0 方 法 。 这 三 种 方法 用 于 输出 警告 框 、 确 认 框 以 及 获取 用 户 信 息 的 输入 框 
三 种 提示 信息 窗 体 。 

alert() 静 态 方法 用 于 输出 最 简单 的 弹出 信息 窗 体 ， 允 许 开发 者 对 弹出 的 信息 进行 自 定 
义 ， 其 使 用 方法 如 下 所 示 。 


window.alert ( Text ) ; 


在 上 面 的 伪 代 码 中 ，Text 关键 字 表 示 弹 出 的 文本 信息 ， 其 为 一 个 字符 串 类 型 的 变量 ， 
或 可 以 字符 串 的 方式 输出 的 变量 和 对 象 (Javascript 会 自动 调用 toString0 方 法 对 这 些 变 量 或 
对 象 进行 强制 转换 )。 例 如 ， 编 写 一 个 最 简单 的 Hello World 程序 ， 代 码 如 下 。 


window.alert ( 'Hello , World !' ); 


在 绝 大 多 数 环境 下 , 开发 者 们 往往 省 略 alert0 静 态 方法 的 window 对 象 , 以 全 局 函数 的 
方式 调用 alert0 静 态 方法 ， 这 种 方式 也 是 正确 的 。 
confirm() 静 态 方法 与 alert(0) 静 态 方法 类 似 ， 其 都 可 以 输出 一 段 文 本 信息 ， 区 别 在 于 其 
弹出 的 对 话 框 窗 体会 提供 一 个 【确认 】 按 钮 和 一 个 【取消 】 按 钮 。 当 用 户 单 击 【确认 】 按 
钮 时 ，confirm() 静 态 方法 会 返回 逻辑 真 ， 而 当 用 户 单 击 【 取 消 】 按 钮 或 关闭 对 话 框 窗 体 时 ， 
confirm() 静 态 方 法 会 返回 逻辑 假 。 使 用 confirm0 静 态 方 法 可 以 强制 用 户 对 某 些 信息 做 出 选 
择 ， 并 获取 用 户 选 择 的 结果 。confirm() 静 态 方法 的 使 用 方式 与 alert() 方 法 基本 类 似 ， 例 如 ， 
弹出 一 个 询问 用 户 是 否 注册 的 对 话 框 ， 并 根据 用 户 不 同 的 操作 来 回复 用 户 ， 代 码 如 下 。 
var blFeedback = window.confirm ( ' 您 确认 需要 在 本 站 注册 码 ? ， ) ; 
if ( blFeedback ) { 
window.alert ( ' 请 进一步 填写 注册 信息 。' ) ，; 
} 
else { 
window.alert ( "感谢 访问 本 站 ， 再 见 。' ) ; 


在 上 面 的 代码 中 ， 声 明了 一 个 名 为 blFeedback 的 变量 ， 用 于 接收 confirm() 静 态 方法 的 
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返回 值 ， 然 后 根据 该 值 进行 了 一 个 简单 的 判断 ， 输 出 了 两 个 不 同 的 弹出 信息 。 

prompt0 静 态 方法 比 之 前 两 种 方法 更 加 复杂 一 些 ， 其 将 弹出 一 个 包含 文本 域 的 对 话 框 ， 
允许 用 户 在 该 对 话 框 中 输入 一 些 信 息 ， 在 用 户 单 击 【 确 认 】 按 钮 后 返回 这 些 信息 ， 其 使 用 
方式 如 下 所 示 。 


window.prompt ( HintText , DefaultText ) ; 
在 上 面 的 伪 代 码 中 ，HintText 关键 字 表示 对 话 框 中 的 提示 文本 信息 ， DefaultText 关键 


字 表 示 对 话 框 中 文本 域 的 默认 显示 文本 信息 。 例 如 ， 弹 出 一 个 对 话 框 ， 邀 请 用 户 输入 自己 
的 姓名 ， 并 将 用 户 输入 的 姓名 以 弹出 信息 的 方式 输出 ， 代 码 如 下 。 


var strUserName = window.prompt ( “请 输入 您 的 姓名 ' ，“' 请 在 此 输入 ' ) ; 


if ( null !== strUserName && '' !== strUserName ) { 
window.alert ( ' 您 的 姓名 是 “' + strUserName + '”。')，; 
} else { 


window.alert (' 很 遗憾 ， 您 没有 输入 您 的 姓名 。'， ) ，; 
} 


3. 打开 浏览 器 窗口 

window 窗口 对 象 提供 了 open0 静 态 方 法 ， 用 于 打开 一 个 新 的 浏览 器 窗口 。open() 静 态 
方法 的 作用 是 在 当前 Web 浏览 器 中 打开 一 个 新 窗口 ， 除 此 之 外 ， 该 静态 方法 还 支持 对 新 窗 
口 的 各 种 特性 进行 定义 ， 弹 出 个 性 化 的 窗口 。open0 方 法 的 使 用 方式 如 下 所 示 。 


window.open ( URL , Name , Features , Replace ) ; 


在 上 面 的 伪 代 人 码 中 , URL 关键 字 表 示 弹 出 窗口 的 目标 URL 地 址 ; Name 关键 字 为 一 个 
可 选 的 字符 串 ， 其 用 于 定义 窗口 的 目标 性 质 ，Features 关键 字 表 示 窗 口 的 特征 ，replace 关 
键 字 为 可 选 的 布尔 值 ， 其 决定 是 否 要 替换 浏览 器 的 历史 记录 中 的 当前 条 目 。open() 方 法 会 
返回 一 个 新 的 window 对 象 实例 ， 该 对 象 实例 指向 的 就 是 打开 的 新 窗口 。 通 过 这 一 返回 值 ， 
可 以 帮助 开发 者 对 新 的 窗口 进行 脚本 操作 。 

弹出 新 窗口 的 目标 性 质 值 与 XHTML 的 超 链接 标记 A 的 target 属性 相关 ， 其 支持 五 种 
属性 值 组 成 的 以 逗号 “,” 分 隔 的 序列 ， 分 别 包 括 “_blank”、“_parent”、“_self”、“_top” 
以 及 某 个 具体 窗口 的 name 属性 值 。 

Javascript 允许 开发 者 为 弹出 的 窗口 定义 14 种 窗口 特征 ， 通 过 特征 名 和 特征 值 的 等 式 
组 合 为 以 逗号 “,” 分 隔 的 序列 ， 实 现 窗口 的 特征 个 性 化 。 这 14 种 特征 如 表 6-2 所 示 。 


表 6-2 弹出 窗口 的 特征 


特征 名 作用 取 值 范围 默认 值 
channelmode ”定义 是 否 以 剧院 模式 显示 窗口 yes、 no、 1、 0 no 
directories 定义 是 否 添加 目录 按钮 yes、no、1、0 yes 
二 定义 是 否 全 屏 模式 显示 窗口 ， 如 设置 其 值 为 yes 或 1， 


请 同时 设置 channelmode 为 yes 或 1， 否则 不 起 作用 We 3 
height 窗口 文档 显示 区 的 高 度 正 整数 
left 窗口 左上 角 的 水 平 坐标 正 整数 
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续 表 

特征 名 作用 取 值 范围 默认 值 
location 是 否 显 示 地 址 栏 yes、no、1、0 yes 
menubar 是 否 显示 菜单 栏 yes、no、1、0 yes 
resizable 是 否 允许 调节 窗口 尺寸 yes、no、1、0 yes 
scrollbars 是 否 显示 滚动 条 yes、no、1、0 yes 
status 是 否 显示 状态 栏 yes、no、1、0 yes 
titlebar 是 否 显 示 标 题 栏 yes、 no、 1、 0 yes 
toolbar 是 否 显示 浏览 器 工具 栏 yes、no、1、0 yes 
top 窗口 左上 角 的 垂直 坐标 正 整数 

width 窗口 文档 显示 区 的 宽度 正 整数 


例如 ， 弹 出 一 个 清华 大 学 出 版 社 的 窗口 ， 定 义 窗口 的 名 称 为 “欢迎 访问 清华 大 学 出 版 
社 官方 网 站 ” 代码 如 下 。 

window.open ( 'http://www.tup.tsinghua.edu.cn' ,，' 欢 迎 访 问 清华 大 学 出 版 社 官方 

网 站 。' ) ; 

需要 注意 的 是 ,由 于 XHTML 和 HTML 的 DOM 中 的 document 对 象 也 具有 一 个 open() 
方法 ， 该 方法 与 window 窗口 对 象 的 open0 静 态 方法 同名 ， 但 作用 并 不 相同 ， 因 此 在 调用 
open() 静 态 方法 时 不 能 省 略 调用 的 window 对 象 。 


4. 关闭 浏览 器 窗口 


window 对 象 提供 了 close0 方 法 ， 用 于 关闭 指定 的 窗 体 实例 。 需 要 注意 的 是 ，close() 
方法 与 之 前 的 各 种 属性 方法 不 同 ， 其 特殊 性 在 于 ， 其 既 可 以 作为 静态 方法 使 用 ， 也 可 以 作 
为 实例 方法 来 使 用 。 也 就 是 说 ， 开 发 者 可 以 直接 通过 window 对 象 来 调用 该 方法 ， 也 可 以 
通过 某 一 个 window 窗口 实例 对 其 进行 调用 , 将 该 窗口 实例 对 应 的 窗口 关闭 。close() 方 法 的 
使 用 方式 如 下 。 

window.close ( ) : 

Instance.close ( ) :; 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表示 窗口 的 实例 名 称 。 如 果 开 发 者 需要 关闭 的 是 
当前 的 窗口 ， 可 以 直接 以 window 对 象 的 方式 调用 close() 方 法 。 如 果 开 发 者 需要 关闭 的 是 
通过 Javascript 以 window.open0 静 态 方 法 打开 的 窗口 ， 则 可 以 在 打开 该 窗口 之 前 通过 
window 对 象 的 open0 方 法 获取 该 窗口 的 window 实例 ， 通 过 该 实例 调用 close0 方 法 ， 代 码 
如 下 。 


var objNewWindow = window.open ( 'http://www.tup.tsinghua.edu.cn' ,' 欢 迎 
访问 清华 大 学 出 版 社 官方 网 站 。' ) ，; 


objNewWindow.close ( ) : 
5. 移动 窗口 位 置 
window 对 象 提供 了 两 种 方法 来 移动 某 个 窗口 对 象 实例 , 即 moveBy( ) 方 法 和 moveTo( ) 
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方法 。 这 两 种 方法 与 close0 方 法 类 似 ， 都 既 可 以 作为 静态 方法 使 用 ， 也 可 以 作为 实例 方法 
使 用 。 

其 中 ，moveByO 实 例 方法 的 作用 是 根据 窗口 对 象 实例 当前 的 坐标 ， 将 其 移动 指定 的 像 
素数 ， 其 使 用 方式 如 下 。 


Instance.moveBY ( HorizontalDistance ，VerticalDistance ) ; 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表示 窗口 对 象 的 实例 名 称 ; HorizontalDistance 关 
键 字 表 示 移 动 的 水 平 距离 ， 单 位 为 像素 ，VerticalDistance 关键 字 表 示 移 动 的 垂直 距离 ， 单 
位 同样 是 像素 。 

例如 ， 将 某 个 弹出 的 窗 体 对 象 向 右 移动 50 像素 ， 向 下 移动 20 像素 ， 代 码 如 下 。 

var objNewWindow = window.open ( 'http://www.tup.tsinghua.edu.cn' ， "欢迎 

访问 清华 大 学 出 版 社 官方 网 站 。' ) ，; 

objNewWindow.moveBy ( 50 ，20 ) ; 

moveTo0 实 例 方法 的 作用 是 将 窗口 对 象 移动 到 指定 的 水 平 坐 标 和 垂直 坐标 位 置 ， 其 使 
用 方式 与 moveBy0 类 似 ， 代 码 如 下 。 


Instance.moveTo ( HorizontalDistance , VerticalDistance ) ; 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表示 窗口 对 象 的 实例 名 称 ，HorizontalDistance 关 
键 字 表示 移动 目标 的 水 平 坐标 ， 单 位 为 像素 ，VerticalDistance 关键 字 表 示 移 动 目标 的 垂直 
坐标 , 单位 同样 是 像素 。 例 如 , 将 某 个 弹出 的 窗 体 对 象 移动 到 当前 显示 器 水 平 坐标 80 像素 、 
垂直 坐标 120 像素 的 位 置 ， 代 码 如 下 。 

var objNewWindow = window.open ( 'http://www.tup.tsinghua.edu.cn' ,' 欢 迎 

访问 清华 大 学 出 版 社 官方 网 站 。' ) ，; 

objNewWindow.moveTo ( 80 ，120 ) 

需要 注意 的 是 ，Javascript 会 限制 moveTo0 实 例 方法 的 移动 坐标 ,防止 目标 移出 当前 显 
示 器 的 显示 范围 。 当 设 定 的 坐标 超出 显示 器 尺寸 时 , 该 方法 将 不 会 再 对 窗 体 进行 移动 操作 。 


6. 设置 窗口 尺寸 


与 移动 窗口 位 置 类 似 ，window 窗口 对 象 还 提供 了 resizeBy0 方 法 和 resizeTo() 方 法 ， 用 
于 对 窗口 的 尺寸 进行 修改 。 其 中 ，resizeBy0 方 法 的 作用 是 根据 当前 窗口 的 尺寸 扩张 或 收缩 
指定 的 像素 数 ， 其 使 用 方法 如 下 所 示 。 


Instance.resizeBy ( HorizontalSize , VerticalSize ) ; 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表 示 窗 口 对 象 的 实例 ， 如 为 window 则 表示 修改 的 
是 当前 的 窗口 ; HorizontalSize 关键 字 表示 水 平方 向 向 右 扩张 或 收缩 的 像素 数 ， 当 其 大 于 0 
时 表示 扩张 ， 当 其 小 于 0 时 表示 收缩 ， 为 0 时 表示 不 变 ，VerticalSize 关键 字 表 示 重 直方 向 
向 下 扩张 或 收缩 的 像素 数 ， 与 水 平方 向 类 似 ， 当 其 大 于 0 时 表示 扩张 ， 当 其 小 于 0 时 表示 
收缩 ， 为 0 时 表示 不 变 。 
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例如 ， 将 当前 窗口 的 水 平 尺寸 增加 100 像素 ， 垂 直 尺 寸 减 少 50 像素 ， 代 码 如 下 。 


window.resizeBy ( 100 ，-50 ) ; 


resizeTo(0) 方 法 的 作用 是 直接 定义 窗口 对 象 实例 的 具体 像素 尺寸 ， 其 使 用 方法 如 下 
所 示 。 


Instance.resizeTo ( HorizontalSize ，VerticalSize ) ; 


在 上 面 的 伪 代 码 中 ，Instance 关键 字 表示 窗口 对 象 的 实例 ， 如 为 window 则 表示 修改 的 
是 当前 窗口 HorizontalSize 关键 字 表 示 窗 口 的 水 平 尺 寸 像素 数 ，VerticalSize 关键 字 表示 窗 
口 的 垂直 尺寸 像素 数 。 这 两 个 数字 都 必须 大 于 0。 

例如 ， 定 义 当前 窗口 的 水 平 尺 寸 为 1366 像素 ， 垂 直 尺 寸 为 768 像素 ， 代 码 如 下 。 


window.resizeTo ( 1366 ，768 ) ; 
7. 周期 运算 


周期 运算 是 指 在 指定 的 时 间 间 隔 周期 调用 和 执行 一 个 函数 或 表达 式 的 一 种 运算 方式 ， 
是 Javascript 提供 的 一 种 重要 功能 。Javascript 为 window 对 象 定义 了 两 个 静态 方法 
setInterval() 和 clearImnterval0， 用 于 在 指定 的 间隔 周期 执行 函数 或 表达 式 ， 以 及 清除 正在 周 
期 执行 函数 和 表达 式 的 命令 。 这 两 种 静态 方法 为 Javascript 制作 动画 以 及 各 种 动态 的 应 用 
程序 提供 了 最 重要 的 支持 ， 使 得 Javascript 成 为 一 种 功能 强大 的 前 端 交 互 工具 。 

setInterval() 方 法 的 作用 是 根据 指定 的 时 间 周 期 执行 函数 或 表达 式 等 命令 ， 并 返回 一 个 
在 当前 全 局 中 唯一 的 标识 , 根据 该 标识 , 开发 者 可 以 通过 其 他 方式 来 控制 这 一 周期 性 命令 。 

setInterval() 方 法 与 循环 语句 的 区 别 在 于 ， 循 环 语句 的 执行 是 连续 的 ， 可 以 视 为 在 无 限 
短 的 周期 里 执行 ， 且 无 法 修改 执行 的 周期 ，setInterval0 方 法 则 允许 开发 者 定义 指定 的 周期 
长 度 ， 例 如 10 秒 、 一 分 钟 甚 至 数 年 等 。setInterval0 的 使 用 方法 如 下 。 


var Identifier = window.setInterval ( Function , Period ) : 


在 上 面 的 伪 代 码 中 ，Identifier 关键 字 表 示 周 期 命令 在 全 局 中 唯一 的 标识 ， 其 通常 为 一 
个 整数 ， 由 setInterval0 静 态 方 法 自动 返回 ， 无 需 用 户 定义 ; Function 关键 字 为 周期 执行 的 
具体 代码 ， 其 可 以 是 一 个 函数 名 ， 也 可 以 是 一 个 表达 式 或 命令 的 字符 串 ，Period 关键 字 表 
示 执 行 的 周期 ， 其 为 整数 ， 单 位 为 毫秒 。 

例如 ， 编 写 一 个 每 隔 一 秒 钟 输出 递增 自然 数 的 小 程序 ， 即 可 先 定 义 一 个 执行 该 自然 数 
递增 并 输出 的 函数 ， 然 后 再 通过 setInterval0 静 态 方法 对 其 进行 周期 执行 ， 代 码 如 下 。 


var intCount = 1; 

function TraceCount ( ){ 
console.log ( intCount ) ; 
intCount ++ 了 7 

} 


Var intInterval = window.setInterval ( TraceCount , 1000 ) ; 


在 上 面 的 代码 中 , 定义 了 一 个 自然 数 变量 intCount, 通过 名 为 TraceCountO 的 函数 来 对 
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该 变量 进行 输出 和 全 加 。 然 后 ， 又 定义 了 一 个 标识 符 intInterval， 通 过 指定 的 间隔 执行 
TraceCount 函数 ， 在 浏览 器 的 命令 窗口 中 定时 输出 递增 的 自然 数 。 

需要 注意 的 是 ， 如 果 需 要 为 定时 执行 的 函数 传递 参数 ， 则 开发 者 需要 将 函数 调用 的 代 
码 以 字符 串 的 方式 作为 setInterval0 方 法 的 第 一 个 参数 来 书写 。 例如， 将 以 上 代码 修改 为 参 
数 传递 方式 ， 如 下 所 示 。 


var intCount = 1 7 

function TraceCount ( intNumber ) { 
console.log ( intNumber ) ; 
证 COun 世 二: 区 

} 


var intInterval = window.setInterval ( 'TraceCount ( intCount ) ' , 1000 ) : 


setInterval0 方 法 不 仅 能 够 周期 性 地 执行 一 个 函数 ， 也 可 以 执行 一 段 代 码 ， 此 时 同样 需 
要 将 这 些 代码 以 字符 串 的 方式 书写 ， 如 下 所 示 。 


var intCount = 1，; 
var intInterval = window.setInterval ( 'console.log ( intCount ) ; intCount 
++ ;7' ,1000); 


以 上 三 段 代 码 的 作用 是 完全 一 致 的 ， 其 区 别 就 是 写法 有 所 不 同 ， 这 三 种 写法 也 体现 了 
setInterval() 静 态 方法 的 三 种 多 样 性 使 用 方式 。 

setInterval() 静 态 方法 虽然 可 以 周期 性 地 执行 一 段 代 码 ， 但 需要 注意 的 是 ， 这 种 周期 性 
执行 需要 消耗 极 大 的 浏览 器 资源 ， 如 果 滥 用 这 种 方法 ， 很 可 能 会 导致 浏览 器 运行 缓慢 乃至 
假死 。 基 于 以 上 理由 ， 在 此 特别 建议 开发 者 在 任何 情况 下 使 用 setInterval0 方 法 来 进行 周期 
运算 时 ， 都 应 该 根据 具体 的 情况 通过 clearInterval0 方 法 及 时 终止 周期 运算 。clearInterval() 
方法 的 使 用 方式 如 下 。 

window.clearInterval ( Identifier ) ; 


在 上 面 的 代码 中 ，Identifier 关键 字 表示 要 终止 的 周期 运算 的 标识 ， 通 过 该 标识 ， 开 发 
者 可 以 精确 地 指向 某 一 个 周期 运算 命令 。 例 如 ， 在 下 面 的 代码 中 ， 就 在 周期 运算 的 函数 中 
添加 了 一 个 条 件 判 断 ， 指 定 当 输 出 的 数字 值 等 于 60 时 终止 周期 运算 ， 代 码 如 下 。 


var intCount = 1 : 
function TraceCount ( ) { 
if ( 60 === intCount ) { 
window.clearInterval ( intInterval ) ; 
} 
else { 
console.log ( intCount ) ; 
intCount ++ 了 
} 
} 


var intInterval = window.setInterval ( TraceCount , 1000 ) :> 
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执行 以 上 代码 ， 即 可 发 现 当 输出 的 数字 到 59 之 后 , 程序 就 自动 终止 了 。 在 使 用 任何 周期 
性 或 循环 执行 的 命令 时 ， 都 应 该 通过 条 件 为 其 指定 周期 或 循环 结束 的 对 应 语句 ， 以 保障 浏览 
器 能 够 及 时 回收 资源 。 


8.， 定时 运算 


定时 运算 也 是 Javascript 内 置 的 一 种 重要 功能 ， 其 与 周期 运算 的 区 别 在 于 ， 周 期 运算 
会 在 指定 的 间隔 多 次 执行 某 段 代 码 或 某 个 函数 ， 而 定时 运算 则 是 在 指定 的 间隔 后 只 执行 一 
次 某 段 代 码 或 某 个 函数 。Javascript 为 window 窗口 对 象 提供 了 setTimeout(0) 静 态 方法 和 
clearTimeout() 静 态 方法 ， 分 别 用 于 开始 定时 运算 和 终止 定时 运算 两 种 功能 。 

setTimeout() 静 态 方法 的 作用 是 在 指定 的 时 间 间 隔 之 后 执行 一 次 某 段 代码 或 某 个 函数 。 
其 使 用 方式 与 setInterval0 静 态 方法 类 似 ， 都 可 以 返回 一 个 在 当前 页 面 中 唯一 的 标识 ， 供 其 
他 脚本 控制 ， 如 下 所 示 。 


var Identifier = window.setTimeout ( Function , Period ) ; 


在 上 面 的 伪 代 码 中 ，Identifier 关键 字 表 示 当 前 定时 运算 在 全 局 中 唯一 的 标识 ， 其 通常 
为 一 个 整数 ， 由 setTimeout0 静 态 方 法 自动 返回 ， 无 需 用 户 定 义 ; Function 关键 字 为 定时 执 
行 的 具体 代码 ， 其 可 以 是 一 个 函数 名 ， 也 可 以 是 一 个 表达 式 或 命令 的 字符 串 ; Period 关键 
字 表 示 执 行 的 等 待 时 间 ， 其 为 整数 ， 单 位 为 毫秒 。 

例如 ， 定 义 在 10 秒 后 执行 一 个 程序 ， 在 Web 浏览 器 的 控制 台 输 出 一 段 文本 内 容 ， 代 
码 如 下 。 


function TraceMessage ( ) { 
console.log ( ' 这 段 内 容 是 10 秒 后 输出 的 ' ) ; 
} 


Var intTimeout = window.setTimeout ( TraceMessage , 10000 ) : 


在 上 面 的 代码 中 ， 通 过 setTimeout() 方 法 直接 将 名 为 TraceMessage 的 函数 作为 参数 ， 
然后 通过 指定 的 10000 毫秒 的 时 间 来 确定 定时 执行 。 与 setInterval0) 静 态 方 法 类 似 ， 
setTimeout() 静 态 方法 的 第 一 个 参数 可 以 是 以 字符 串 形式 书写 的 函数 和 参数 ， 也 可 以 是 一 段 
Javascript 代码 。 

如 果 开 发 者 需要 临时 终止 定时 运算 ， 则 可 以 使 用 window 窗口 对 象 提 供 的 另 一 静态 方 
法 clearTimeout()。 该 方法 的 用 法 与 clearInterval0 静 态 方 法 类 似 ， 如 下 所 示 。 


window.clearTimeout ( Identifier ) ; 


在 上 面 的 伪 代 码 中 ，Identifier 关键 字 表示 定时 运算 的 标识 。 例 如 ， 在 下 面 的 代码 中 ， 
就 强制 使 用 clearTimeout0 静 态 方法 将 一 个 定时 执行 的 代码 终止 ， 如 下 所 示 。 


function TraceMessage ( ) { 
console.1og ( ' 这 段 内 容 永 远 不 可 能 输出 。' ) ; 
} 
Var intTimeout = window.setTimeout ( TraceMessage , 10000 ) ; 


window.clearTimeout ( intTimeout ) ; 


在 上 面 的 代码 中 ， 通 过 setTimeout() 静 态 方 法 定义 10 秒 后 执行 TraceMessage0 函 数 ， 
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但 由 于 在 setTimeout0 静 态 方 法 之 后 的 clearTimeout0 静 态 方法 对 定时 命令 进行 了 及 时 清除 ， 
因此 Javascript 将 不 会 再 执行 TraceMessage0 〇 函数 。 


6.1.2 浏览 器 对 象 


浏览 器 对 象 navigator 是 一 个 由 窗口 对 象 window 派生 而 来 的 对 象 ， 其 主要 将 当前 Web 
页 所 处 的 Web 浏览 器 作为 实例 ， 通 过 属性 和 方法 来 获取 该 Web 浏览 器 以 及 相关 操作 系统 
的 各 种 信息 。 

navigator 对 象 的 属性 较 多 , 但 是 只 有 少 部 分 属性 被 绝 大 多 数 Web 浏览 器 支持 , 通常 情 
况 下 ， 开 发 者 使 用 navigator 对 象 实现 以 下 几 种 功能 。 


1. 检测 浏览 器 类 型 


每 一 种 Web 浏览 器 在 解析 和 显示 Web 页 时 都 会 向 Web 服务 器 发 送 一 段 客户 端 代 理 信 
息 字 符 串 ， 表 明 自 身 的 各 种 状态 。 这 一 字符 串 包 含 了 大 量 关 于 客户 端 浏览 器 以 及 客户 端 操 
作 系 统 的 情况 。 

通过 浏览 器 对 象 的 userAgent 静态 属性 ， 开 发 者 可 以 读 取 这 段 字符 串 信 息 ， 从 而 判断 客户 
端 浏 览 器 的 类 型 。 常 见 的 Mozilla Firefox、Opera、Safari 以 及 各 版 本 Internet Explorer 浏览 
器 在 其 默认 操作 系统 下 的 客户 端 代理 字符 串 如 表 6-3 所 示 。 

表 6.3 常见 Web 浏览 串 的 客户 端 代理 信息 
浏览 和 操作 系统 代理 信息 


JIntemet Explorer 4 Windows98 SE Mozilla/4.0 (compatible; MSIE 4.01; Windows 98) 
JIntemet Explorer 5 Windows 2000 UserAgent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 


5.0) 

JIntemet Explorer 5.5 Windows Me UserAgent: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98; 
Win 9x 4.90) 

Internet Explorer 6 Windows XP UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 
5.1:; SV1) 


Internet Explorer 7 Windows Vista UserAgent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 
60; SLCC1I: NET CLR 2.0.50727; NET CLR 
3.0.30729: .NET4.0C: .NET4.0E:; .NET CLR 3.5.30729) 

JIntemet Explorer 8 Windows 7 UserAgent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 
6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 
3.5.30729; .NET CLR 3.0.30729: Media Center PC 6.0) 

JIntemet Explorer 9 Windows 7 UserAgent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 
6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 
3.5.30729; .NET CLR 3.0.30729: Media Center PC 6.0) 

Intermet Explorer 10 Windows 8 UserAgent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 
6.2: WOW64; Trident/6.0: Touch: .NET4.0E: .NET4.0C: Tablet 
PC 2.0; InfoPath.3) 

Internet Explorer 10 Windows 8 UserAgent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 

(Modem UI) 6.2; Win64; x64; Trident/6.0; Touch; .NET4.0E; .NET4.0C; 
Tablet PC 2.0; InfoPath.3) 
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浏览 器 操作 系统 代理 信息 
Internet Explorer 11 Windows 8.1 UserAgent: “Mozilla/30 (Windows NT 6.3; WOW64; 


Trident/7.0; .NET4.0E; .NET4.0C; InfoPath3; .NET CLR 
3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Media 
Center PC 6.0; rv:11.0) like Gecko 
Jntemet Explorer 11 Windows 8.1 UserAgent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; 
(Modern UI) Trident/7.0; .NET4.0E; .NET4.0C; InfoPath3; .NET CLR 
3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Media 
Center PC 6.0; rv:11.0) like Gecko 


Mozilla Firefox 26.0 ”Windows 8.1 UserAgent: Mozilla/5.0 (Windows NT 6.3; WOWS64; 1v:26.0) 
Gecko/20100101 Firefox/26.0 
Opera Windows 8.1 UserAgent: Mozilla/5.0 (Windows NT 6.3; WOW64) 


AppleWebKit/537.36 (KHIML, like Gecko) Chrome/ 
31.0.1650.63 Safari/537.36 OPR/18.0.1284.68 


Apple Safari Windows 8.1 UserAgent: Mozilla/5.0 (Windows NT 6.2; WOW64) 
AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 
Safari/534.57.2 


除了 userAgent 属性 外 ，Javascript 还 为 浏览 器 对 象 提供 了 其 他 一 些 方法 用 于 获取 Web 
浏览 器 的 各 种 信息 ， 但 是 这 些 属性 往往 针对 早期 的 Web 浏览 器 设计 ， 已 经 无 法 反映 今天 
Web 浏览 器 的 情况 ， 因 此 在 实际 开发 中 ， 推 荐 开发 者 通过 对 用 户 代 理 字符 串 的 解析 来 判断 
用 户 使 用 的 是 哪 一 种 Web 浏览 器 。 


2. 检测 是 否 启用 Cookie 


Cookie 是 一 种 特殊 的 Web 技术 ， 其 原理 是 由 服务 器 端 生成 数据 ， 发 送 给 Web 浏览 器 
等 客户 端 , 然后 由 Web 浏览 器 等 客户 端 将 数据 以 键 值 对 的 方式 存 入 到 本 地 计算 机 中 指定 目 
录 的 文本 文件 内 。 在 下 一 次 请 求 同 一 网 站 时 ，Web 浏览 器 可 以 将 这 些 数据 发 回 给 服务 器 。 

Cookie 是 一 种 重要 的 记录 用 户 行为 或 实现 服务 器 端 在 客户 计算 机 上 存储 简易 数据 的 
方式 ， 因 此 在 开发 一 些 需要 应 用 Cookie 的 Web 应 用 时 ， 判 断 用 户 的 Web 浏览 器 是 否 启 用 
了 Cookie 就 十 分 重要 。 

Javascript 为 浏览 器 对 象 提供 了 cookieEnabled 属性 用 于 判断 用 户 的 Web 浏览 器 的 
Cookie 功能 。 该 属性 将 返回 一 个 逻辑 型 数据 ， 通 过 对 该 属性 的 判断 ， 可 以 方便 地 输出 用 户 
Web 浏览 器 的 Cookie 状况 ,在 下 面 的 代码 中 , 就 通过 该 值 输出 了 用 户 Web 浏览 器 的 Cookie 
功能 状况 。 

if ( window.navigator.cookieEnabled ) { 

console.1og (“' 您 的 Web 浏览 器 支持 Cookie 功能 。' ) ; 
} else { 
console.1og (“您 的 Web 浏览 器 不 支持 Cookie 功能 或 关闭 了 Cookie 功能 。' ) ，; 


} 


6.1.3 屏幕 对 象 


计算 机 的 显示 器 是 计算 机 向 用 户 传递 信息 的 重要 输出 设备 ， 也 是 为 用 户 显示 信息 最 主 
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要 的 平台 。 在 开发 Web 程序 时 ， 开 发 者 需要 获取 用 户 计算 机 的 屏幕 显示 信息 ， 以 决定 在 用 
户 全 屏 显 示 Web 页 时 向 用 户 传递 多 少数 据 ， 以 及 传递 信息 的 类 型 。 

屏幕 对 象 screen 就 是 Javascript window 对 象 的 一 个 子 对 象 ， 其 主要 用 于 显示 用 户 显示 
器 信息 。 通 过 该 对 象 ， 开 发 者 可 以 方便 地 确认 用 户 计算 机 屏幕 的 像素 大 小 。 在 绝 大 多 数 
Web 浏览 器 中 ， 屏 幕 对 象 支持 五 种 只 读 属性 ， 其 作用 如 表 6-4 所 示 。 


表 6-4 屏幕 对 象 的 常用 属性 
属性 作用 
availHeight ”获取 除 任务 栏 以 外 的 显示 屏幕 高 度 〈 单 位 为 像素 ) 
availWidth ”获取 除 任务 栏 以 外 的 显示 屏幕 宽度 单位 为 像素 ) 
colorDepth ”获取 显示 器 的 色彩 深度 位 数 〈 整 数 ) 
height 获取 显示 屏幕 的 高 度 〈 单 位 为 像素 ) 
width 获取 显示 屏幕 的 宽度 〈 单 位 为 像素 ) 


例如 ， 通 过 屏幕 对 象 的 各 种 属性 获取 Windows 8.1 操作 系统 中 ， 一 个 尺寸 为 23 寸 、 分 
辨 率 为 1920X 1080 的 显示 器 的 屏幕 信息 ， 代 码 如 下 所 示 。 


var objScreen = window.screen ; 

console.1og (' 用 户 的 有 效 显示 区 域 高 度 为 ' + objScreen.availHeight + ' 像 素 ' ) ; 
console.1og ( ' 用 户 的 有 效 显 示 区 域 宽度 为 ' + objScreen.availWidth +' 像 素 ' ) ，; 
console.1og ( ' 用 户 的 显示 器 色彩 为 ' + objScreen.colorDepth + ' 位 ' ) ， 
console.1og (' 用 户 的 显示 区 域 高 度 为 ' + objScreen.height + ' 像 素 ' ) ; 
console.1og ( ' 用 户 的 显示 区 域 宽度 为 ' + objScreen.width + ' 像 素 ' ) ，; 


执行 以 上 代码 ， 即 可 输出 该 显示 器 的 各 种 信息 参数 ， 如 下 所 示 。 


用 户 的 有 效 显示 区 域 高 度 为 1050 像素 
用 户 的 有 效 显 示 区 域 宽度 为 1920 像素 
用 户 的 显示 器 色彩 为 24 位 

用 户 的 显示 区 域 高 度 为 1080 像素 

用 户 的 显示 区 域 宽度 为 1920 像素 


6.1.4 ”历史 记录 与 定位 


除了 之 前 介绍 的 三 种 对 象 外 ， 窗 口 对 象 window 还 支持 两 个 子 对 象 ， 就 是 历史 记录 对 
象 history 和 定位 对 象 location。 这 两 个 对 象 分 别 承载 了 不 同 的 功能 ， 历 史记 录 对 象 history 
用 于 记录 和 控制 用 户 Web 浏览 器 的 访问 记录 信息 , 定位 对 象 location 则 主要 对 站 点 的 URL 
进行 分 析 和 操作 。 


1. 历史 记录 对 象 


历史 记录 对 象 history 的 作用 是 操作 Web 浏览 器 访问 站 点 的 记录 ， 并 提供 一 些 方法 来 
操作 Web 浏览 器 在 这 些 访问 站 点 之 间 跳 转 。 早 期 的 历史 记录 对 象 功 能 较 强 ,支持 很 多 访问 
操作 ， 但 是 随 着 人 们 对 隐私 安全 的 重视 ， 今 天 的 历史 记录 对 象 仅 保留 了 有 限 的 功能 ， 只 能 
对 用 户 浏览 器 的 浏览 历史 进行 操作 ， 无 法 再 读 取 一 些 用 户 浏览 的 信息 。 

历史 记录 对 象 支持 length 属性 ， 用 于 获取 当前 窗口 记录 了 多 少 已 经 访问 过 的 URL 地 
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址 。 例 如 ， 通 过 弹出 消息 框 来 获取 当前 窗口 的 历史 记录 数量 ， 方 法 如 下 所 示 。 
alert ( window.history.length ) ; 


除 此 之 外 ， 历 史记 录 对 和 象 还 提供 了 三 个 方法 ， 用 于 用 户 本 地 浏览 器 的 历史 记录 跳 转 ， 
如 表 6-5 所 示 。 
表 6-5 历史 记录 对 象 的 常用 方法 
方法 名 ”作用 
back0 控制 Web 浏览 器 跳 转 至 当前 窗口 的 上 一 个 历史 记录 页 面 
forward0 ”控制 Web 浏览 器 跳 转 至 当前 窗口 的 下 一 个 历史 记录 页 面 
go0 控制 Web 浏览 器 跳 转 至 当前 窗口 指定 的 历史 记录 页 面 


其 中 ， 开 发 者 可 以 直接 使 用 back0 方 法 和 forward0 方 法 对 上 一 个 或 下 一 个 历史 记录 页 
面 进行 跳 转 操 作 。 如 果 需 要 跳 转 到 精确 的 某 一 条 历史 记录 的 页 面 ， 则 可 以 使 用 go0 方 法 通 
过 参数 进行 调节 ， 其 使 用 方式 如 下 。 


window.history.go ( Count ) ; 


在 上 面 的 代码 中 ，Count 关键 字 表示 要 跳 转 到 的 历史 记录 的 序列 ， 其 可 以 是 正 整 数 或 
负 整 数 。 如 其 为 正 整数 ， 则 表示 向 之 后 的 历史 记录 跳 转 ， 如 其 为 负 整数 ， 则 表示 向 之 前 的 
历史 记录 跳 转 。 

跳 转 到 上 一 个 历史 记录 的 页 面 ， 开 发 者 既 可 以 通过 back() 方 法 实现 ， 也 可 以 通过 go0 
方法 实现 ， 以 下 两 行 代码 的 效果 就 是 完全 相同 的 。 

window.history.go ( -1 ) 

window.history.back ( ) : 


同 理 ， 跳 转 到 上 一 个 历史 记录 的 页 面 ， 开 发 者 也 可 以 通过 以 下 的 两 种 方式 实现 。 


window.history.go ( 1); 
window.history.forward ( ) : 


2. 定位 对 象 

定位 对 象 location 的 作用 是 为 开发 者 提供 访问 当前 Web 文档 URL 地 址 的 方法 ， 并 提 
供 若 干 属 性 帮助 开发 者 对 该 URL 地 址 进行 解析 。 通 常情 况 下 ， 一 个 完整 的 URL 地 址 可 能 
由 若干 元 素 组 成 ， 如 下 所 示 。 


Protocol://Host:Port/Path?Key=Value[&Key=Value]#Anchor 


在 上 面 的 伪 代 码 中 ， 共 包含 七 个 关键 字 ， 表 示 了 URL 地 址 中 的 六 种 组 成 元 素 ， 其 含 
义 如 表 6-6 所 示 。 


表 6-6 ”URL 地 址 的 六 种 组 成 元 素 
名 称 作用 
Protocol 传输 协议 ， 决 定 了 URL 地 址 的 用 途 以 及 数据 传输 模式 
Host 主机 的 地 址 ， 其 可 以 是 域名 ， 也 可 以 是 下 
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名 称 作用 
Port 端口 号 ， 其 为 0 到 65535 之 间 的 数字 
Path 文档 在 主机 中 存放 的 路 径 


Key=Value ”用 于 数据 检索 的 键 值 对 。 如 为 多 个 键 值 对 ， 则 可 以 用 “&” 符 号 将 其 隔 开 
Anchor 锚 记 


定位 对 象 location 提供 了 八 种 属性 ， 用 于 对 当前 Web 页 的 URL 地 址 进行 分 析 ， 获 取 
以 上 几 种 URL 地 址 的 元 素 ， 如 表 6-7 所 示 。 


表 6-7 定位 对 象 的 属性 


属性 作用 

hash 设置 或 返回 URL 地 址 中 的 锚 记 
host 设置 或 返回 主机 地 址 和 端口 号 
hostname ”设置 或 返回 主机 的 地 址 

href 设置 或 返回 整个 URL 地 址 
pathname ”设置 或 返回 URL 中 的 文档 存放 路 径 
port 设置 或 返回 URL 中 的 端口 号 
protocol 设置 或 返回 URL 中 的 通信 协议 
Search 设置 或 返回 用 于 数据 检索 的 键 值 对 


以 上 八 种 属性 既 可 以 对 当前 文档 的 URL 进行 分 析 ， 获 取 其 中 的 内 容 ， 也 可 以 对 当前 
文档 的 URL 进行 修改 ， 跳 转 至 新 的 Web 页 面 。 例 如 ， 在 当前 的 Web 页 中 需要 跳 转 至 清华 
大 学 出 版 社 的 官方 网 站 首页 ， 即 可 通过 以 下 方式 实现 。 


window.location.href = 'http://tup.tsinghua.edu.cn' ，; 
定位 对 象 的 方法 包括 三 种 ， 如 表 6-8 所 示 。 


表 6-8 ”定位 对 象 的 方法 
方法 作用 
assign() ”根据 指定 的 URL 地 址 加 载 新 的 Web 文档 
reload() ”重新 加 载 当前 的 Web 文档 
replace0 ”根据 指定 的 URL 加 载 新 的 Web 文档， 替换 当前 文档 


上 面 的 三 种 方法 都 是 静态 方法 ， 其 中 ,reload0 方 法 可 以 直接 由 window.location 对 象 调 
用 ， 而 assign0 和 replaceO) 两 种 方法 在 使 用 时 都 必须 以 加 载 的 新 Web 文档 URL 作为 参数 来 
使 用 。assign() 方 法 和 replace0 方 法 的 区 别 在 于 ， 使 用 assign0 方 法 来 加 载 新 的 Web 文档 ， 
Web 浏览 器 将 自动 建立 一 个 新 的 历史 记录 ， 而 使 用 replace() 方 法 来 加 载 Web 文档 ， 新 的 
Web 文档 历史 记录 将 覆盖 当前 的 历史 记录 。 


6.2 HTML 文档 对 象 模型 


Web 前 端 开发 的 本 质 就 是 通过 Javascript 对 各 种 XHTML 、HTML 进行 操作 , 动态 地 改 
变 XHTML 和 HTML 的 代码 结构 ， 以 将 更 新 、 更 富有 交互 性 的 内 容 呈 现 给 终端 用 户 。 文 档 


第 6 章 ”Web 对 象 和 交互 229 


对 象 模型 提供 了 一 种 完全 面向 对 象 的 文档 操作 方式 ， 使 Javascript 能 够 便捷 地 实现 对 文档 
内 容 的 读 取 和 写 入 。 

当 Javascript 脚本 语言 对 这 些 文档 内 容 进 行 操作 时 ， 必 须 依赖 XHTML 和 HTML 的 文 
档 对 象 模 型 ， 将 XHTML 或 HTML 中 的 节点 转换 为 DOM 对象， 通过 DOM 对 象 的 属性 和 
方法 实现 对 Web 内 容 的 控制 。 


6.2.1 HTML DOM 简介 


HTML DOM (Document Object Model， 文 档 对 象 模型 ) 是 一 种 对 XHTML 或 HTML 
进行 抽象 化 处 理 , 将 所 有 XHTML 和 HTML 标记 视 为 对 象 , 然后 为 其 统一 定义 属性 和 方法 
的 特殊 模型 。 

1. DOM 树 形 结构 


文档 对 象 模型 将 Web 文档 视 为 一 个 树 形 结构 ， 将 每 个 XHTML 或 HIML 的 标记 都 视 
为 这 个 树 形 结构 的 一 个 节点 。 通 过 该 树 形 结构 ， 开 发 者 可 以 方便 地 使 用 Javascript 访问 和 
操作 各 级 节点 中 的 数据 ， 如 图 6-1 所 示 。 


标题 标记 节点 
<title> 


图 6-1 文档 对 象 模型 的 文档 树 结构 


图 6-1 展示 了 绝 大 多 数 Web 文档 的 节点 结构 。 在 图 6-1 中 ， 一 共 展 示 了 4 种 类 型 的 节 
点 , 即 Document 整体 节点 `Element 标记 节点 、Attribute 属性 节点 和 Text 文本 节点 .XHTML 
和 HTML 都 是 衍生 自 XML 的 结构 标记 语言 ， 因 此 其 所 有 的 节点 与 XML 十 分 类 似 ， 都 包 
含 多 种 类 型 。 除 了 以 上 4 种 类 型 外 ，XHTML 和 HTML 的 节点 还 包括 其 他 8 种 类 型 ， 如 表 
6-9 所 示 。 
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表 6-9 XHTML 和 HIMLDOM 的 节点 类 型 
节点 名 称 类 型 值 ”说 明 支持 的 子 元 素 
普通 标记 元 素 Text 、Comment 、 Pressesing_Instruction 、 
CDATASection、 Entity Reference、Element 


- 


Element 


Attribute 2 标记 元 素 的 属性 Text、Entity Reference 

Text 有 标记 元 素 内 的 文本 ”无 

CDATA Section 4 CDATA 区 段 无 

Entity_Reference 5 实体 引用 Pressesing Instruction 、Comment 、 Text 、 
CDATASection、Entity_Reference 

Entity 6 实体 Pressesing Instruction 、Comment 、 Text 、 
CDATASection、 Entity_Reference 

Processing Instruction 7 处 理 指令 无 

Comment 8 注释 无 

Document 9 文档 Element、Pressesing Instruction、Comment 

Document Type 10 文档 类 型 声明 无 

Document Fragment i 文档 局 部 实体 无 

Notation 12 文档 类 型 声明 符号 无 


具体 到 XHTML 和 HTML 文档 ，Document、Document Type、Notation 三 种 节点 组 成 
了 文档 类 型 声明 ; 根 元 素 标记 HIML、 文 档 头 标记 HEAD、 文 档 主体 标记 BODY 以 及 各 种 


2. 树 形 结构 的 层级 关系 


DOM 的 文档 树 结构 将 整个 文档 的 所 有 标记 进行 了 分 层 ， 并 通过 几 个 特殊 的 术语 来 描 
述 两 个 相 邻 的 XHTML 或 HTML 标记 之 间 的 关系 ， 即 父 级 (parent)、 子 级 〈child)、 同 级 
Csibling)、 前 代 (ancestor) 和 后 代 (descendant)。 

。 父 级 (parent) 

父 级 是 指 某 个 XHTML 或 HTML 标记 外 层 的 第 一 级 标记 。 除 了 根 元 素 标 记 HTML 之 
外 ， 所 有 的 XHTML 或 HTML 节点 都 有 父 级 元 素 。 例 如 ， 在 绝 大 多 数 Web 文档 中 ， 根 元 
素 标记 HIML 都 是 文档 头 标记 HEAD 和 文档 主体 标记 BODY 的 父 级 节点 。 

。 子 级 (child) 

子 级 是 指 某 个 XHTML 或 HTML 标记 内 部 的 第 一 级 标记 , 一 个 节点 可 以 拥有 任意 数量 
的 子 级 元 素 。 子 级 元 素 不 仅 包括 Element 类 型 的 节点 ， 还 包括 Attribute 节点 和 Text 节点 。 
例如 ， 在 下 面 的 代码 中 ， 包 含 一 个 定义 列表 标记 DL， 如 下 所 示 。 


<dl id="detailList"> 

<dt>xXHTML</dt> 

<dd>Extensible HyperText Markup Language</dd> 
</dl> 


在 上 面 的 代码 中 ， 定 义 列表 标记 包含 了 四 个 子 级 节点 : 一 个 Attribute 节点 ， 即 其 id 
属性 ;一 个 Text 节点 ， 包 含 若干 空 字符 ， 两 个 Element 节点 ， 即 词 条 标记 DT 和 描述 标 
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记 DLs 


Ee 


理 ， 词 条 标记 DT 包含 一 个 Text 节点 ， 其 内 容 为 XHTML; 描述 标记 DL 也 包含 一 
个 Text 节点 ， 其 内 容 为 Extensible HyperText Markup Language。 

。 同 级 (sibling) 

同 级 是 指 拥 有 相同 父 级 元 素 的 若干 标记 之 间 的 关系 。 例 如， 文档 头 元 素 HEAD 和 文档 
主体 元 素 BODY 就 属于 同 级 关系 。 在 下 面 的 代码 中 ， 定义 了 三 个 标记 ， 其 包括 一 个 无 序列 
表 标 记 UL 和 两 个 列表 项 目标 记 LI， 如 下 所 示 。 


<ul> 
<1i id="element1"” title="elementl">element1</1i> 
<1i id="element2" title="element2">element2</1i> 
</ul> 


在 上 面 的 代码 中 ， 两 个 列表 项 目标 记 LI 之 间 就 互 为 同 级 关系 ， 每 个 列表 项 目标 记 LI 
的 id 属性 和 title 属性 之 间 也 互 为 同 级 关系 。 

。 前 代 (ancestor) 

前 代 是 父 级 的 延伸 和 发 展 ， 是 节点 的 父 级 节点 、 父 级 节点 的 父 级 节点 …… 直 至 根 节点 
之 间 所 有 父 级 关系 的 节点 的 集合 。 例 如 ， 在 下 面 的 代码 中 ， 定 义 了 一 个 简单 的 Web 页 ， 如 
下 所 示 。 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head><!-- …… -> 
</head> 
<body> 
<p><a href="http://www.baidu.com" title=" 百 度 "> 百度 </a> 一 下 ， 你 就 知道 。 
</p> 
</body> 
</html> 


在 上 面 的 代码 中 ， 超 链接 标记 A 的 父 级 节点 是 段落 标记 P， 其 前 代 节 点 就 是 包含 段落 
标记 P、 主 体 标记 BODY、 根 元 素 标记 HTML 的 集合 。 

。 后 代 (descendant) 

后 代 是 与 前 代 完 全 相反 的 一 个 概念 ， 是 子 级 的 延伸 和 发 展 ， 是 某 个 节点 包含 的 所 有 节 
点 的 集合 ， 包 括 该 节点 的 子 级 节点 、 子 级 节点 的 子 级 节点 …… 例 如 ， 仍 然 是 上 一 段 代 码 ， 
根 元 素 标 记 HIML 的 后 代 就 是 除根 元 素 标 记 HIML 自身 以 外 其 他 所 有 的 节点 。 


6.2.2” Document 对 象 


document 对 象 是 文档 对 象 模型 的 根 对 象 , 是 所 有 文档 对 象 模型 的 父 集 , 也 是 Document 
类 DOM 节点 的 具体 实例 。 在 Javascript 脚本 语言 中 ，document 对 象 被 视 为 window 对 象 下 
的 一 个 子 集 ， 因 此 开发 者 既 可 以 直接 调用 document 对 象 来 使 用 该 对 象 ， 也 可 以 通过 
window.document 的 方式 来 调用 该 对 象 。 几 乎 所 有 对 Web 文档 中 节点 的 操作 都 是 依托 
document 对 象 来 实现 的 。 
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1. 访问 元 素 集合 


作为 整个 文档 中 所 有 XHTML 或 HTML 元 素 的 根 ，document 对 象 提供 了 五 种 集合 ， 
帮助 开发 者 对 相关 类 型 的 文档 节点 进行 快速 访问 ,这 种 访问 方式 是 DOM 独 有 的 ,如 表 6-10 
所 示 。 


表 6-10 ” document 对 象 的 元 素 集合 


集合 名 ”作用 
all[] 提供 对 文档 中 所 有 XHTML 或 HTML 元 素 的 访问 


anchors[] ”提供 对 文档 中 所 有 锚 记 的 访问 
forms[] ”提供 对 文档 中 所 有 表单 的 访问 
images[] ”提供 对 文档 中 所 有 图 像 的 访问 
links[] 提供 对 文档 中 所 有 超 链接 和 热 区 的 访问 


以 上 五 种 集合 所 返回 的 数据 均 为 由 若干 XHTML 或 HTML 对 象 组 成 的 数组 。 使 用 这 些 
集合 ， 开 发 者 可 以 方便 地 对 集合 中 所 有 的 元 素 进行 操作 。 例 如 ， 在 下 面 的 代码 中 ， 就 通过 
images[] 集 合 统计 了 某 个 Web 页 中 图 像 的 数量 ， 如 下 所 示 。 


console.log ( window.document.images.length ) ; 


2. 读 写 cookie 


cookie 属性 为 开发 者 提供 对 Cookie 数据 的 操作 ， 在 用 户 浏览 器 支持 Cookie 的 情况 下 
对 Cookie 进行 读 写 。 需 要 注意 的 是 ， 基 于 用 户 隐 私 保护 和 安全 的 考虑 ，cookie 属性 只 能 读 
写本 页 面 的 Cookie 数据 。 在 下 面 的 代码 中 ， 就 通过 cookie 属性 实现 了 cookie 数据 的 读 取 。 


console.log ( window.document.cookie ) ; 


同 理 , 如 果 需 要 对 Cookie 数据 进行 写 入 操作 , 也 可 以 直接 将 需要 写 入 的 值 直接 作为 属 
性 值 ， 赋 予 cookie 属性 ， 则 Web 浏览 器 将 会 自动 把 该 值 追加 到 Cookie 数据 里 ， 如 下 所 示 。 


Var strUsername = 'Li Lei' ; 


window.document .cookie = 'username=Li Lei' ; 
3. 获取 当前 文档 的 其 他 信息 


除了 读 写 Cookie 数据 外 ，document 对 象 还 支持 通过 其 他 几 个 属性 来 获取 文档 的 各 种 
基本 信息 ， 如 表 6-11 所 示 。 


表 6-11 document 对 象 的 其 他 属性 
属性 作用 
domain 获取 当前 文档 存放 的 服务 器 域名 或 他 
lastModified ”获取 当前 文档 最 后 被 修改 时 的 日 期 和 时 间 
referrer 如 当前 文档 是 通过 超 链接 载 入 ， 则 获取 该 超 链 接 所 在 的 文档 URL， 否 则 返回 pull 
title 获取 当前 文档 的 标题 信息 
URL 获取 当前 文档 的 URL 
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需要 注意 的 是 ， 以 上 五 种 属性 都 是 只 读 属 性 ， 只 能 帮助 开发 者 获取 信息 ， 无 法 对 这 些 
信息 进行 修改 。 在 下 面 的 代码 中 ， 就 将 通过 代码 一 次 输出 以 上 五 种 信息 ， 如 下 所 示 。 

console.1og (' 本 页 面 所 在 的 主机 地 址 是 ' + document.domain ) ，; 

console.1log (' 本 页 面 最 后 编辑 时 间 为 ' + document.lastModified ) ，; 

if ( null !== document.referrer ) { 

console.1og ( ' 本 页 面 由 ' + document .referrer + ' 跳 转 而 来 。' ) ; 

} 

if ( ''!== document.title) { 

console.1log ( ' 本 页 面 的 标题 为 " + document.title ) ; 

} 

console.1og (“' 本 页 面 的 URL 为 ' + document.URL ) : 


4. 向 文档 写 入 代码 


document 对 象 提供 了 两 个 实例 方法 用 于 向 当前 文档 或 指定 的 文档 流 写 入 文本 内 容 , 即 
write0 方 法 和 writeIn0 方 法 。 这 两 个 方法 的 使 用 方式 大 体 相 同 ， 例 如 write0 方 法 的 使 用 方式 
如 下 。 


Target.write ( Text ) ; 


在 上 面 的 伪 代 码 中 ，Target 关键 字 表 示 被 写 入 的 目标 文档 ， 其 可 以 是 一 个 文档 实例 的 
名 称 ， 也 可 以 是 document 对 象 自身 , 表示 当前 的 文档 ; Text 关键 字 表示 写 入 到 该 文档 的 文 
本 内 容 ， 其 应 为 一 个 字符 串 ， 且 不 限制 大 小 。 例 如 ， 将 当前 文档 转 为 Helloworld， 方 法 
如 下 。 


document .write ( 'Hello ，World!' ) ; 


需要 注意 的 是 ，write() 方 法 并 不 能 精确 地 定义 写 入 文本 的 位 置 ， 只 能 将 这 些 文本 依次 
追加 到 文档 流 中 。writeIn0 方 法 的 使 用 方式 与 write() 方 法 基本 相同 ， 其 区 别 在 于 ，write0 
方法 会 直接 将 新 的 内 容 追 加 到 文档 流 中 ， 而 writeIn() 方 法 则 会 在 追加 内 容 之 后 在 每 一 次 写 
入 的 内 容 后 添加 一 个 换行 符 。 关 于 writeIm() 方 法 的 具体 用 法 ， 在 此 不 再 歼 述 。 


5. 打开 和 关闭 Web 文档 流 


document 对 象 提供 了 open0 和 close0 两 种 方法 以 帮助 开发 者 对 输出 文本 内 容 的 Web 文 
档 流 进行 打开 和 关闭 操作 ， 创 建新 的 Web 页 并 对 Web 页 的 内 容 进 行 订 制 。 在 此 需要 注意 
的 是 ，document 对 象 的 open() 方 法 和 close0 方 法 与 window 对 象 的 两 个 同名 方法 有 很 大 差 
别 ， 不 能 混用 。 

document 对 象 的 open() 方 法 更 多 地 被 用 于 创建 一 个 新 的 文档 流 , 其 使 用 方法 如 下 所 示 。 


document .open ( MIMEtype ，Replace ) ; 


在 上 面 的 伪 代 码 中 ，MIMEtype 关键 字 和 Replace 关键 字 均 为 可 选 参数 ，MIMEtype 关 
键 字 表 示 创 建文 档 流 的 MIME 类 型 ,默认 为 “texthtml”;Replace 关键 字 的 值 仅 能 是 replace， 
当 该 参数 被 设置 时 ， 将 定义 新 文档 从 父 文档 继承 历史 记录 条 目 。 在 下 面 的 代码 中 ， 就 通过 
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document 对 象 的 open() 方 法 创建 了 一 个 文档 流 ， 如 下 所 示 。 

Var objNewDoc = document -open ( 'text/html' ) ; 

在 定义 了 该 文档 流 后 ， 开 发 者 可 以 通过 document 对 象 的 write( 方 法 或 writeIn0 方 法 ， 
向 该 文档 流 写 入 文本 内 容 ， 如 下 所 示 。 

objNewDoc.write ( "Hello , World !' ) ; 

最 后 ， 再 通过 document 对 象 的 close() 方 法 封闭 和 保存 该 对 象 ， 代 码 如 下 。 

objNewDoc.close ( ) : 

在 封闭 和 保存 该 对 象 后 ，Javascript 会 自动 将 该 对 象 作 为 一 个 已 存在 的 Web 文档 打开 ， 
复 盖 当前 的 Web 页 文档 。 需 要 注意 ， 当 且 仅 当 某 个 Web 文档 流 对 象 被 执行 close0 方 法 之 
后 ， 该 文档 才能 被 打开 ， 和 否则 该 文档 将 一 直 存在 于 内 存 中 。 

6. 操作 指定 的 HTML 或 XHTML 对 象 


除了 访问 元 素 集合 外 ，document 对 象 还 提供 了 四 种 方法 用 于 精确 地 访问 某 一 个 或 某 一 
类 指定 的 XHTML 或 HTML 节点 ， 其 分 别 为 getElementById0 方 法 、getElementsByName() 
方法 、getElementByTagNage() 方 法 和 getElementByClassName() 方 法 。 

。 getElementById() 方 法 

getElementById() 方 法 的 作用 是 以 其 唯一 参数 值 与 整个 Web 文档 中 所 有 XHTML 和 
HTML 节点 的 id 属性 进行 匹配 ， 将 匹配 的 节点 以 Javascript 对 象 的 方式 返回 ， 如 果 匹 配 失 
败 ， 则 该 方法 将 返回 一 个 null。 该 方法 的 使 用 方式 如 下 所 示 。 


document .getElementBylId ( ID ) ; 

在 上 面 的 伪 代 码 中 ，ID 关键 字 表示 需要 匹配 的 id 属性 ， 其 不 可 为 空 且 必 须 为 一 个 独 
立 的 字符 串 。 例 如 ， 当 Web 文档 中 存在 一 个 名 为 “TestButton” 的 按钮 ， 其 代码 如 下 所 示 。 

<button type="button" id="TestButton"> 测 试 </button> 


在 下 面 的 代码 中 ， 就 将 使 用 document 对 象 的 getElementById() 方 法 获取 该 按钮 的 对 象 
实例 ， 如 下 所 示 。 


var objTestButton = window.document .getElementById ( "TestButton' ) ; 


由 于 在 一 个 Web 文档 中 ，XHTML 或 HIML 标记 的 id 属性 是 不 能 重复 的 ， 因 此 ， 
getElementById() 方 法 将 返回 一 个 符合 要 求 的 唯一 节点 

。 getElementsByName() 方 法 

getElementsByName() 方 法 与 getElementsById() 方 法 类 似 ， 其 作用 是 以 其 唯一 参数 值 与 
整个 Web 文档 中 所 有 XHTML 和 HTML 节 pe name 属性 进行 匹配 , 将 匹配 的 节点 以 一 个 
集合 的 方式 返回 ， 该 集合 中 将 包含 所 有 符合 的 节点 的 对 象 化 实例 。 如 果 匹 配 失败 ， 则 该 方 
法 将 返回 一 个 空 的 集合 。 ee 
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document .getElementsByName ( Name ) ; 


在 上 面 的 伪 代 码 中 , Name 关键 字 表 示 需 要 匹配 的 name 属性 ， 其 不 可 为 空 且 必须 为 一 
个 独立 的 字符 串 。 

例如 ， 当 Web 文档 中 存在 两 个 表单 ， 每 个 表单 中 都 包含 一 个 name 属性 为 UserName 
的 文本 框 ， 其 代码 如 下 所 示 。 


<form id="signup" action="signup.php"> 
<p> 
<label> 账 户 名 称 </label> 
<input type="text" name="userName" value="" /> 
</p> 
7 
</form> 
<form id="signin" action="signin.php"> 
<p> 
<labe1> 账 户 名 称 </label> 
<input type="text" name="userName" value="" /> 
</p> 
这 ' 一 一 一 让 
</form> 


使 用 getElementsByName() 方 法 ， 可 以 方便 地 获取 这 两 个 文本 框 的 对 象 实例 , 对 其 进行 
统计 或 其 他 操作 ， 如 下 所 示 。 


var arrInputBoxes = window.document .getElementsByName ( 'userName' ) ; 
console.log ( arrInputBoxes.length ) ; // 输 出 2 


需要 注意 的 是 ， 开 发 者 可 以 像 用 数组 一 样 使 用 这 种 获取 的 节点 对 象 集合 ， 但 是 这 种 集 
合 通常 情况 下 是 只 读 的 ， 只 有 引用 该 集合 后 才能 对 其 修改 。 

。 getElementsByTagName() 方 法 

getElementsByTagName0 方 法 的 作用 是 根据 其 唯一 参数 值 与 整个 Web 文档 中 所 有 
XHTML 和 HTML 节点 的 标记 名 称 进行 匹配 ， 将 匹配 的 节点 以 一 个 集合 的 方式 返回 ， 该 集 
合 中 将 包含 所 有 符合 的 节点 的 对 象 化 实例 , 如 果 匹 配 失败 , 则 该 方法 将 返回 一 个 空 的 集合 。 
该 方法 的 使 用 方式 如 下 所 示 。 


document .getElementsByTagName( TagName ) ; 


在 上 面 的 伪 代 码 中 ，TagName 关键 字 表 示 需 要 匹配 的 标签 名 ， 其 必须 是 XHTML 和 
HTML 标准 中 的 合法 标签 名 。 例 如， 在 一 个 Web 文档 中 包含 三 个 超 链接 标记 ， 其 分 别 指向 
清华 大 学 、 清 华 大 学 出 版 社 以 及 百度 ， 代 码 如 下 。 

<a href="http://www-tsinghua.edu.cn" title=" 清 华 大 学 "> 清华 大 学 </a> 

<a href="http://tup.tsinghua.edu.cn"” title=" 清 华 大 学 出 版 社 "> 清华 大 学 出 版 社 

</a> 

<a href="http://www.baidu.com"” title=" 百 度 "> 百 度 </a> 
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使 用 getElementsByTagName() 方 法 ， 可 以 方便 地 将 这 三 个 超 链 接 的 对 象 化 实例 组 合 到 
一 个 集合 中 ， 并 进行 统计 和 操作 ， 如 下 所 示 。 


var arrHyperLinks = window.document .getElementsByTagName ( 'a' ) ; 

console.log ( arrHyperLinks.length ) ; 

。 getElementByClassName() 方 法 

getElementByClassName() 方 法 顾名思义 ， 就 是 将 某 个 字符 串 与 Web 文档 中 所 有 
XHTML 或 HTML 节点 的 class 属性 值 来 进行 匹配 ， 并 将 符合 匹配 的 所 有 节点 以 集合 的 方 
式 返回 ， 该 集合 将 包含 所 有 符合 的 节点 的 对 象 化 实例 ， 如 果 匹 配 失败 ， 则 该 方法 将 返回 一 
个 空 的 集合 。 该 方法 的 使 用 方式 如 下 所 示 。 


document .getElementByClassName ( ClassName ) ; 


在 上 面 的 伪 代 码 中 ，ClassName 关键 字 表示 要 匹配 的 class 属性 值 ， 其 必须 是 一 个 字符 
串 ， 且 在 Web 文档 中 与 某 一 个 或 某 一 些 标记 的 class 属性 相符 。 例 如 ， 在 Web 文档 中 存在 
以 下 三 个 标记 ， 其 中 ， 两 个 标记 的 class 属性 为 “test1”， 一 个 标记 的 class 属性 为 “test2”， 
如 下 所 示 。 
<p class="test1"> 
<a href="http://about:blank" title="testl" class="test1">test1</a>test1 
</p> 
<ul class="test2"> 
<li>test2</1i> 
</ul> 


使 用 getElementByClassName() 方 法 ， 开 发 者 可 以 方便 地 通过 class 属性 值 将 这 三 个 标 
记 筛 选 出 来 ， 如 下 所 示 。 


Var arrTest1l = document .getElementByClassName ( "test1l1' ) ; 
Var arrTest2 = document .getElementBYClassName ( "test2' ) ; 
console.log ( arrTest1.length ) ; // 输 出 2 
console.log ( arrTest2.length ) ; // 输 出 1 


需要 注意 的 是 ，getElementByClassName() 方 法 是 在 近年 最 新 版 DOM3 和 HIML5 中 被 
支持 的 ， 而 早期 的 Web 浏览 器 并 不 支持 使 用 该 方法 ， 这 些 浏 览 器 包括 正 8 及 之 前 更 低 版 
本 的 正 浏览 器 和 早期 的 Firefox 浏览 器 等 。 所 以 ， 在 使 用 该 方法 时 应 考虑 浏览 器 的 兼容 性 
问题 。 


6.2.3 ”Element 对 象 


按照 文档 对 象 模型 的 结构 而 言 ，element 对 象 属于 document 对 象 下 的 一 个 成 员 ， 其 是 
所 有 对 象 化 的 XHTML 和 HTML 节点 〈 根 元 素 节点 除外 ) 的 基 类 ， 也 是 Element 类 节点 的 
实例 。 

开发 者 通过 document 对 象 的 getElementById() 方 法 获取 的 Javascript 对 象 都 可 以 使 用 
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Element 对 象 的 属性 和 方法 。 

element 对 象 包含 的 属性 和 方法 极 多 ， 通 过 这 些 属 性 和 方法 ， 开 发 者 可 以 获取 XHTML 
和 HTML 节点 的 各 种 信息 ， 并 对 其 进行 编辑 操作 。 以 下 将 介绍 Element 对 象 常用 的 各 种 属 
性 和 方法 。 


在 通过 document 对 象 的 getElementById() 方 法 获取 了 XHTML 和 HTML 节点 对 象 的 实 
例 后 ,开发 者 可 以 使 用 element 对 象 的 一 些 实例 属性 来 获取 该 对 象 实例 在 XHTML 或 HTML 
中 的 标记 名 称 和 其 他 各 种 信息 。 

。 获取 节点 标记 名 称 

其 中 ，element 对 象 提供 了 tagName 属性 用 于 获取 节点 对 象 的 标记 名 称 ， 需 要 注意 的 
是 ，tagName 返回 的 标记 字符 串 中 所 有 的 字母 都 是 大 写 。 例 如 ， 在 Web 文档 中 存在 一 个 id 
属性 为 test 的 定义 列表 ， 代 码 如 下 。 


<dl id="test"></dl1l> 


在 使 用 document 对 象 的 getElementById() 方 法 将 其 转换 为 对 象 实例 后 ， 即 可 获得 其 标 
记 的 名 称 ， 代 码 如 下 。 


var objDetailList = document .getElementById ( 'test' ) ; 
console.log ( objDetailList.tagName ) ; // 输 出 DL 


除了 tagName 属性 外 ,element 对 象 还 提供 了 nodeName 属性 , 其 同样 可 以 获得 XHTML 
和 HTML 节点 对 象 的 标记 名 称 。nodeName 属性 的 使 用 方式 和 tagName 类 似 ， 都 返回 标记 
名 称 的 大 写 形式 ， 例 如 ， 在 读 取 之 前 id 属性 为 test 的 定义 列表 的 标记 名 ， 代 码 如 下 。 

console.log ( objDetailList.nodeName ) ; // 输 出 DL 

tagName 属性 和 nodeName 属性 的 功能 十 分 类 似 ， 其 区 别 在 于 ，tagName 属性 仅 针对 
XHTML 和 HTML 标记 的 Document 类 型 或 Element 类 型 节点 有 效 , 而 nodeName 属性 的 涵 
盖 范 围 更 加 广泛 一 些 , 其 不 仅 支持 Document 类 型 或 Element 类 型 节点 ,还 支持 各 种 Attribute 
类 型 节点 和 Text 类 型 节点 。 在 处 理 这 些 节 点 时 ，nodeName 属性 和 tagName 属性 返回 的 值 
类 型 如 表 6-12 所 示 。 


表 6-12 不 同类 型 节点 的 nodeName 属性 和 tagName 属性 


节点 类 型 类 型 值 nodeName 属性 值 tagName 属性 值 
Element 1 大 写 的 节点 标记 名 称 大 写 的 节点 标记 名 称 
Attribute 和 属性 名 称 null 

Text 3 #text null 

CDATA Section 4 #cdata-section null 

Entity_Reference 争 实体 参考 null 

Entity 6 实体 名 称 null 

Processing Instruction 7 命令 操作 的 目标 null 

Comment 8 #comment null 
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节点 类 型 类 型 值 nodeName 属性 值 tagName 属性 值 
Document 9 #document null 
Document Type 10 文档 类 型 名 称 null 
Document Fragment 让 #document-fragment null 
Notation 12 符号 名 称 null 


由 表 6-12 可 看 出 ， nodeName 属性 的 功能 涵盖 了 tagName 的 功能 。 在 实际 开发 中 ， 
应 尽量 使 用 nodeName 属性 。 

除了 获取 节点 名 称 外 ，element 对 象 还 提供 了 nodeType 属性 ， 用 于 获取 某 个 节点 的 实 
际 类 型 。 该 属性 将 返回 一 个 数字 ， 表 示 节 点 类 型 的 类 型 值 。 关 于 节点 类 型 的 知识 ， 请 参考 
本 节 之 前 的 相关 小 节 ， 在 此 不 再 袭 述 。 

。 获取 节点 值 

element 对 象 支持 nodeValue 属性 ， 用 于 帮助 开发 者 获取 节点 的 value 属性 值 ， 当 某 个 
节点 具备 value 属性 (例如 文本 框 等 组 件 ) 时 ， 开 发 者 即 可 使 用 该 属性 获取 节点 的 值 。 该 
方法 的 使 用 方式 与 nodeType 类 似 , 都 可 以 直接 读 取 节点 包括 的 文本 值 , 其 使 用 方式 在 此 不 
再 闭 述 。 


2. 读 取 关联 节点 信息 


element 对 象 提供 了 一 系列 实例 属性 , 帮助 开发 者 快速 地 获取 某 个 节点 周围 相关 节点 的 
信息 ， 从 而 对 这 些 相关 节点 进行 操作 。 

需要 注意 的 是 ,在 实际 开发 中 ，element 对 象 在 读 取 节 点 时 并 不 会 仅 读 取 Element 类 节 
点 , 也 会 读 取 Text 或 Comment 类 型 的 节点 。 例 如 , 在 下 面 的 代码 中 , 定义 了 一 个 id 为 “OS” 
的 无 序列 表 UL 标记 ， 其 包含 了 三 种 子 节点 标记 ， 代 码 如 下 。 


<ul id="0OS"> 
<1li id="6.1">Microsoft Windows 7</1i> 
<1i id="6.2">Microsoft Windows 8</1i> 
<1i id="6.3">Microsoft Windows 8.1</1i> 
</ul> 


在 实际 的 运行 环境 中 , Web 浏览 器 会 将 无 序列 表 标 记 UL 的 三 个 列表 项 目标 记 LI 及 其 
之 间 的 空隙 都 视 为 无 序列 表 标记 UL 的 子 节 点 ， 即 该 标记 包含 三 个 Element 类 的 子 节点 和 
四 个 Text 类 的 子 节点 ， 如 表 6-13 所 示 。 


表 6-13 上 一 段 代码 中 UL 标记 的 子 节点 


位 置 顺序 。” 子 节点 类 型 ”nodeType nodeValue nodeName 
1 Text 3 空 #text 

第 一 个 个 列 表 项 目 2 Element 1 Microsoft Windows 7 I 

空 节点 3 Text 3 宇 #text 

第 三 个 列 表 项 目 4 Element 1 Microsoft Windows 8 LI 

空 节点 5 Text 3 宇 #text 
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续 表 
子 节点 位 置 顺序 ” 子 节点 类 型 ”nodeType nodeValue nodeName 
第 三 个 列表 项 目 6 Element 1 Microsoft Windows 8.1 II 
空 节点 学 Text 3 室 #text 


因此 ， 进 行 读 取 相关 节点 的 操作 时 ， 一 定 要 注意 到 element 对 象 的 这 一 特性 ， 在 进行 
子 节点 筛选 时 必须 考虑 到 子 节点 中 的 非 Element 类 型 节点 。 以 下 为 Element 对 象 操作 节点 
的 具体 方式 。 

。 获取 父 节点 

element 对 象 提供 了 parentNode 属性 ,用 于 获取 节点 对 象 的 父 节 点 的 DOM 对 象 .例如 ， 
在 下 面 的 代码 中 ， 就 定义 了 一 个 段落 标记 P 了 和 一 个 超 链接 标记 A， 代 码 如 下 。 

<p> 如 对 本 书 有 任何 疑问 请 访问 <a id="tup" href="http://tup.tsinghua.edu.cn" 

title=" 清 华 大 学 出 版 社 "> 清 华 大 学 出 版 社 </a> 官 方 网 站 。</p> 


在 上 面 的 代码 中 ,包含 了 两 个 XHTML 标记 。 其 中 ,段落 标记 了 为 超 链 接 标 记 A 的 父 
节点 ， 在 实例 化 超 链 接 标记 后 ， 即 可 通过 parentNode 属性 读 取 其 父 节点 段落 ， 代 码 如 下 。 


var objHyperLink = document.getElementById ( "tup' ); 
var objHyperLinkParent = objHyperLink.parentNode ; 
console.1og ( objHyperLinkParent.nodeName ) ; // 输 出 P 


需要 注意 的 是 ， 该 属性 只 返回 一 级 父 节 点 的 DOM 对 象 ， 并 非 其 所 有 父 节点 DOM 对 
象 的 集合 。 也 就 是 说 ， 只 能 返回 节点 上 一 级 的 父 节 点 ， 不 能 返回 更 深层 次 的 父 节点 。 

。 获取 子 节 点 集合 

element 对 象 的 childNodes 属性 可 以 读 取 对 象 包含 的 下 一 级 子 节点 ,返回 一 个 基于 XML 
NodeList 格式 的 对 象 ， 以 类 似 集合 的 方式 按照 指定 的 顺序 存储 Element 对 象 的 所 有 子 节点 
(包括 文本 节点 )， 并 提供 了 length 属性 可 以 帮助 开发 者 查询 该 对 象 包含 的 子 节点 数量 ， 以 
及 item0 方 法 来 调用 子 节点 的 集合 。 

其 中 ，length 属性 的 使 用 方式 和 数组 对 象 的 length 属性 类 似 ， 在 此 不 再 袭 述 。item() 
方法 的 使 用 方式 如 下 所 示 。 


NodeList.item ( Index ) ; 


在 上 面 的 伪 代 码 中 ，NodeList 关键 字 表 示 element 对 象 的 childNodes 属性 返回 的 
NodeList 对 象 ，Index 关键 字 表示 子 节点 对 象 在 NodeList 对 象 中 的 索引 号 。 例 如 ， 在 下 面 
的 代码 中 定义 了 一 个 id 属性 为 “Office” 的 无 序列 表 UL 标记 。 


<ul id="Office"> 

<1i id="word">Microsoft Word</1i> 

<li id="excel">Microsoft Excel</1i> 

<1i id="powerpoint">Microsoft Powerpoint</1i> 
</ul> 


在 上 面 的 代码 中 ， 无 序列 表 标 记 UL 包含 了 三 个 Element 类 型 子 节点 和 四 个 Text 类 型 
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子 节点 。 在 将 该 无 序列 表 实 例 化 为 DOM 对 象 后 ， 即 可 通过 element 对 象 的 childNodes 实 
例 属性 获取 其 子 节点 的 集合 对 象 ， 然 后 再 通过 item() 方 法 将 这 些 子 节点 的 名 称 输出 ， 代 码 
如 下 。 


Var objULOffice = document .getElementById ( "Office' ) ; 

var objULOfficeNodes = objULOffice.childNodes ; 

for ( var intLoop = 0 ; intLoop < objULOfficeNodes.length ; intLoop ++ ) 
{ 


console.log ( objULOfficeNodes.item( intLoop ) .nodeName ); 


} 


。 获取 首尾 子 节 点 

如 果 仅 需要 获取 某 个 节点 的 首尾 两 个 子 节点 , 则 可 以 使 用 element 对 象 提 供 的 firstChild 
属性 和 lastChild 属性 ， 这 两 个 属性 可 以 分 别 返 回 Element 类 型 节点 的 第 一 个 子 节点 和 最 后 
一 个 子 节点 。 

需要 注意 的 是 ，Web 浏览 器 在 筛选 目标 节点 的 子 节点 时 ， 并 不 会 局 限于 Element 类 型 
的 节点 ，Text 或 Comment 等 类 型 的 节点 也 会 被 视 为 合法 的 子 节 点 予以 识别 。 因 此 , 在 使 用 
firstChild 和 lastChild 两 种 属性 来 获取 绝 大 多 数 Element 类 型 的 节点 时 ， 其 获得 的 结果 很 可 
能 是 空 的 文本 节点 (除非 该 节点 只 包含 文本 节点 )。 

。 获取 相 邻 节点 

element 对 象 还 提供 了 previousSibling 属性 和 nextSibling 属性 两 种 属性 来 获取 某 个 节点 
对 象 之 前 和 之 后 相 邻 的 节点 。 与 其 他 操作 关联 节点 的 属性 相同 ， 这 两 个 属性 在 筛选 目标 节 
点 的 相 邻 节点 时 ， 也 会 包括 Text 或 Comment 等 类 型 的 节点 。 其 使 用 方式 与 之 前 介绍 的 几 
种 属性 大 体 类 似 ， 在 此 不 青 袭 述 。 

。 获取 指定 标记 子 节 点 

如 果 开 发 者 需要 获取 指定 标记 类 型 的 子 节点 ， 可 以 使 用 element 对 象 提供 的 
getElementByTagName() 方 法 ， 该 方法 的 使 用 方式 与 document 对 象 的 同名 方法 类 似 ， 如 下 
所 示 。 


Element .getElementByTagName ( TagName ) ; 


在 上 面 的 伪 代 码 中 ,Element 关 键 字 表示 需要 检索 后 代 节点 的 DOM 节点 对 象 ;TagName 
关键 字 表 示 需 要 检索 的 后 代 节 点 标记 名 称 。 

element 对 象 的 getElementByTagName() 方 法 与 document 对 象 的 同名 方法 区 别 在 于 
document 对 象 的 同名 方法 用 于 获取 整个 Web 文档 中 所 有 的 Element 节点 ， 而 element 对象 
的 该 方法 则 只 检索 某 一 个 Element 节点 的 后 代 节点 。 这 两 个 方法 都 会 返回 一 个 符合 要 求 的 
节点 集合 ， 其 使 用 方法 大 体 类 似 ， 在 此 不 再 袭 述 。 


3. 操作 节点 对 象 属性 


绝 大 多 数 XHTML 或 HTML 标记 都 支持 各 种 各 样 的 属性 ，Element 对 象 作 为 所 有 
XHTML 和 HTML 对 象 实例 的 类 ， 支 持 多 种 方式 对 这 些 对 象 实例 的 属性 进行 读 写 操作 。 
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。 获取 属性 集合 

element 对 象 提供 了 attributes 属性 ,用 于 获取 XHTML 或 HTML 对 象 实例 的 所 有 属性 ， 
将 其 放置 到 一 个 NamedNodeMap 类 的 只 读 集合 中 ， 帮 助 开 发 者 对 其 进行 调用 。 例 如 ， 在 
Web 文档 中 存在 一 个 超 链接 标记 A， 代 码 如 下 。 


<a href="http://tup.tsinghua.edu.cn" title=" 清华 大 学 出 版 社 " id= z 
"TestHyperLink"> 清华 大 学 出 版 社 </a> 


该 超 链 接 存在 三 个 属性 和 对 应 的 属性 值 ,因此 开发 者 可 以 通过 element 对 象 的 attributes 
属性 读 取 这 三 个 属性 组 成 的 集合 ， 并 进行 统计 ， 代 码 如 下 。 

var objHyperLink = window.document.getElementById ( 'TestHyperLink' ) ; 

var arrHyperLinkAttributes = objHyperLink.attributes ; 


H 


console.1og ( arrHyperLinkAttributes.length ) ; // 输 出 3 


需要 注意 的 是 NamedNodeMap 类 集合 是 一 个 XML 格式 的 对 象 ， 而 并 非 一 个 简单 的 数 
组 ， 开 发 者 可 以 使 用 item0 方 法 和 getNamedItem() 方 法 来 读 取 其 节点 数据 ， 在 此 不 再 歼 述 。 

。 操作 核心 属性 

绝 大 多 数 XHTML 或 HTML 标记 都 支持 class、id、style 和 title 四 种 核心 属性 。element 
对 象 也 对 应 这 四 种 核心 属性 ， 提 供 了 四 种 实例 属性 供 开 发 者 对 其 进行 读 写 操作 ， 如 表 6-14 
所 示 。 


表 6-14 ”element 对 象 操作 核心 属性 的 属性 


属性 作用 

className  ” 读 取 或 编辑 XHTML 或 HTML 节点 的 class 属性 ， 修 改 节点 所 属 的 类 

id 读 取 或 编辑 XHTML 或 HTML 节点 的 id 属性 

style 读 取 或 编辑 XHTML 或 HTML 节点 的 style 属性 ， 即 该 标记 的 内 联 样式 表 

title 读 取 或 编辑 XHTML 或 HTML 节点 的 title 属性 ， 即 该 标记 的 工具 提示 图像 除 外 》 


例如 ， 之 前 的 超 链 接 标记 A， 将 其 工具 提示 设置 为 中 文 的 “清华 大 学 出 版 社 ” 如 下 
所 示 。 


<a href="http://tup.tsinghua.edu.cn" title=" 清华 大 学 出 版 社 " id= 
"TestHyperLink"> 清 华 大 学 出 版 社 </a> 


如 需 将 其 工具 提示 修改 为 英文 的 “Tsinghua University Press”， 即 可 通过 element 对 象 
的 实例 属性 title 进行 修改 ， 如 下 所 示 。 


var objHyperLink = window.document .getElementBylId ( 'TestHyperLink' ) ; 
objHyperLink.title = "Tsinghua University Press' ; 


需要 注意 的 是 , 由 于 Javascript 本 身 是 客户 端 脚本 语言 , 因此 其 并 不 能 直接 修改 HIML 
文件 本 身 ， 而 仅 能 修改 处 于 内 存 中 的 Web 页 对 象 ， 如 果 需 要 将 修改 的 数据 持久 化 ， 需 要 与 
后 台 程 序 相 关联 ， 通 过 后 台 程 序 实 现 。 

。 判断 属性 是 否 存在 

element 对 象 提 供 了 两 种 方式 来 判断 一 个 XHTML 或 HIML 节点 对 象 实例 的 属性 是 否 
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存在 。 如 果 需 要 判断 节点 是 否 存在 某 个 指定 的 属性 ， 可 以 使 用 element 对 象 提供 的 
hasAttribute() 方 法 ， 该 方法 的 使 用 方式 如 下 。 

Element .hasRAttribute ( Attribute ) ; 

在 上 面 的 伪 代 码 中 , Element 关键 字 表 示 目 标的 节点 对 象 实例 ; Attribute 关键 字 表示 具 
体 属性 的 名 称 。hasAttribute0 方 法 在 判断 节点 对 象 实例 的 属性 后 ， 如 该 属性 存在 ， 将 返回 
逻辑 真 ， 否 则 返回 逻辑 假 。 

例如 ， 在 Web 文档 中 包含 一 个 段落 标记 PP， 其 包含 一 个 id 属性 ， 如 下 所 示 。 

<p id="TestParaph">Test.</p> 


使 用 hasAttribute() 方 法 判断 其 是 否 包 含 id 属性 和 class 属性 ， 则 该 方法 将 直接 输出 判 
断 的 结果 ， 代 码 如 下 。 


var objParaph = window.document .getElementById ( "TestParaph' ) ; 
console.1og ( objParaph.hasAttribute ( 'id' ) ) ; // 输 出 true 
console.log ( objParaph.hasAttribute ( 'class' ) ) ; // 输 出 false 


除了 判断 某 个 具体 属性 之 外 ，element 对 象 还 允许 开发 者 判断 某 个 XHTML 或 HTML 
节点 对 象 实例 是 否 存 在 任何 属性 ， 其 需要 使 用 到 该 对 象 的 hasAttributes() 方 法 ， 其 使 用 方法 
如 下 所 示 。 

Element.hasAttributes ( ); 


在 上 面 的 伪 代 码 中 ，Element 关键 字 表示 目标 的 节点 对 象 实例 。 该 方法 在 判断 节点 对 
象 实例 的 属性 后 ， 如 果 该 节点 对 象 实例 存 在 任意 属性 ， 将 返回 逻辑 真 ， 否 则 返回 逻辑 假 。 
例如 ， 判 断 Web 文档 的 主体 标记 BODY 是 否 存在 属性 ， 即 可 使 用 该 方法 ， 如 下 所 示 。 


var objBody = window.document .getElementsByTagName ( 'body' ) [0] ; 
console.log ( objBody.hasAttributes ( ) ); 


。 读 取 一 般 属性 
element 对 象 提供 了 getAttribute0 方 法 ， 用 于 读 取 XHTML 或 HTML 节点 对 象 实例 的 
某 个 具体 属性 值 ， 其 使 用 方法 如 下 所 示 。 


Element .getAttribute ( Attribute ) ; 


在 上 面 的 伪 代 码 中 , Element 关键 字 表 示 目 标的 节点 对 象 实例 ; Attribute 关键 字 表 示 需 
要 读 取 的 属性 名 称 。 在 读 取 属 性 时 ， 如 果 属 性 存在 ， 则 该 方法 将 会 返回 属性 的 具体 值 ， 否 
则 该 方法 将 返回 一 个 null。 

例如 , 在 Web 文档 中 存在 一 个 文本 框 标记 , 用 于 为 用 户 提供 输入 用 户 账户 名 称 的 位 置 ， 
代码 如 下 。 


<input type="text" value="" id="userName" name="userName" /> 


如 果 开 发 者 需要 获取 用 户 输入 的 账户 名 称 ， 即 可 通过 getAttribute( 方 法 获取 该 属性 的 
值 ， 代 码 如 下 。 
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var objInput = window.document.getElementById ( 'userName' ) ; 


console.log ( objInput.getAttribute ( "value' ) ) > 

。 编辑 一 般 属性 

Javascript 允许 开发 者 通过 element 对 象 的 setAttribute() 方 法 来 即时 修改 XHTML 或 
HIML 节点 对 象 实例 的 某 个 特定 属性 值 ， 将 其 应 用 到 当前 Web 页 中 。 其 使 用 方法 与 
getAttribute() 方 法 类 似 ， 如 下 所 示 。 


Element.setAttribute ( Attribute , Value ) ; 


在 上 面 的 伪 代 码 中 , Element 关键 字 表示 目标 的 节点 对 象 实例 ; Attribute 关键 字 表示 需 
要 修改 的 属性 名 称 ; Value 关键 字 表示 要 赋予 的 属性 值 ， 其 可 以 为 空 ， 表 示 值 为 空 。 在 修 
改 属性 时 ， 如 果 属 性 存在 ， 则 该 方法 将 会 直接 修改 属性 值 ， 和 否则 ， 该 方法 将 会 为 标记 创建 
例如 ， 在 Web 文档 中 存在 一 个 输入 控件 ， 其 为 按钮 类 型 ， 包 含 三 种 属性 ， 如 下 所 示 。 


<input type="button" id="click" value="click" /> 


通过 element 对 象 的 setAttribute0 方 法 , 开发 者 可 以 方便 地 改变 其 中 任意 一 个 属性 的 值 ， 
或 为 其 建立 新 的 属性 。 例 如 ， 为 其 添加 class 属性 ， 设 置 属性 值 为 “UserName”， 并 将 其 修 
改 为 文本 框 ， 如 下 所 示 。 

var objClickButton = window.document.getElementById ( "click' ) ; 


objClickButton.setAttribute ( 'type' , 'text' ) ; 
objClickButton.setAttribute ( 'class' , 'Username' ) ; 


。 移 除 一 般 属 性 

除了 对 一 般 属性 进行 读 取 和 编辑 外 ，element 对 象 还 提供 了 removeAttribute() 方 法 ， 帮 
助 开发 者 移 除 XHTML 或 HTML 对 象 的 某 个 特定 属性 及 其 关联 的 属性 值 .removeAttributeO 
方法 的 使 用 方式 如 下 所 示 。 

ELement .removeAttribute ( Attribute ) ; 


在 上 面 的 伪 代 码 中 , Element 关键 字 表 示 移 除 属性 的 目标 , Attribute 关键 字 表示 被 移 除 
的 属性 名 称 。 例 如 ， 在 Web 文档 中 存在 一 个 id 为 test 的 复 选 框 组 件 ， 代 码 如 下 。 


<input type="checkbox" value="1" checked="checked" id="test" /> 
在 上 面 的 代码 中 ， 复 选 框 组 件 包 含 了 checked 组 件 ， 因 此 其 默认 为 被 选中 的 状态 。 使 


用 removeAttribute() 方 法 ， 开 发 者 可 以 方便 地 删除 checked 属性 ， 从 而 取消 该 组 件 的 选择 状 
态 ， 代 码 如 下 。 


var objCheckBox = window.document .getElementById ( 'test' ) ; 

objCheckBox.removeAttribute ( "checked' ) ; 

在 此 需要 注意 的 是 , 一 些 XHTML 或 HTML 标记 的 属性 属于 必需 属性 ， 因 此 移 除 这 些 
属性 后 可 能 造成 Web 文档 的 错误 。 另 外 ， 一 些 非 必需 的 XHTML 或 HTML 属性 往往 会 存 
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在 默认 值 ， 移 除 这 些 属性 后 ，Web 浏览 器 也 可 能 会 将 其 以 默认 值 的 方式 识别 和 使 用 。 
4. 操作 节点 对 象 内 容 


绝 大 多 数 XHTML 或 HIML 的 节点 对 象 都 允许 在 其 中 插入 文本 内 容 , 并 将 文本 内 容 显 
示 到 Web 页 中 。element 对 象 提供 了 两 种 属性 用 于 读 写 节点 对 象 的 内 容 ， 其 分 别 为 
innerHTML 和 textContent。 

。 操作 节点 内 的 普通 文本 

element 对 象 的 innerHTML 属性 可 以 帮助 开发 者 读 取 或 修改 XHTML 或 HTML 节点 对 
象 实例 中 的 文本 内 容 。innerHTML 属性 属于 可 读 写 属性 ， 如 直接 引用 该 属性 ， 则 该 属性 将 
返回 一 个 字符 串 ， 如 需要 对 该 属性 进行 编辑 写 入 ， 可 直接 将 一 个 字符 串 作为 属性 值 书写 。 

例如 ， 在 Web 文档 中 存在 一 个 id 为 test 的 文本 区 域 组 件 ， 其 中 默认 写 有 “测试 文本 ” 
的 字样 ， 代 码 如 下 。 


<textarea id="test"> 测 试 文本 </textarea> 


使 用 innerHTML 属性 ， 开 发 者 可 以 方便 地 读 取 该 文本 区 域 组 件 内 的 文本 内 容 ， 如 下 
所 示 。 


Var objTextArea = window.document .getElementById ( 'test' ) ; 
console.1og ( objTextArea.innerHTML ) ; // 输 出 测试 文本 


如 需要 修改 该 文本 区 域 组 件 中 的 文本 内 容 ， 也 可 以 直接 通过 属性 赋值 的 方式 来 实现 ， 
代码 如 下 。 

objTextArea.innerHTML = 'Test Text' ; 

console.1log ( objTextArea.innerHTML ) ; // 输 出 Test Text 


。 操作 节点 及 其 后 代 节 点 的 文本 

innerHTML 属性 的 作用 是 直接 输出 某 个 XHTML 或 HTML 节点 对 象 内 部 的 内 容 文本 。 
在 使 用 该 属性 时 需要 注意 ， 这 种 输出 仅 支持 当前 选择 的 节点 对 象 ， 而 不 支持 节点 对 象 的 子 
集 对 象 。 如 果 需 要 在 输出 时 包含 节点 子 集 对 象 的 内 容 文 本 ， 则 可 以 使 用 element 对 象 的 
textContent 属性 ， 其 使 用 方式 大 体 与 innerHTML 类 似 ， 在 此 不 再 歼 述 。 


5， 操作 子 节点 


element 对 象 允许 开发 者 为 某 个 DOM 节点 对 象 添 加 子 节点 ,并 提供 了 两 种 添加 的 方式 ， 
即 向 DOM 节点 对 象 的 指定 位 置 添加 子 节点 ， 或 向 DOM 节点 对 象 的 所 有 子 节 点 之 后 追加 
子 节点 。 同 时 ， 该 对 象 也 支持 开发 者 对 DOM 节点 对 象 的 子 节点 进行 移 除 操作 。 

。 向 指定 位 置 添 加 子 节点 

element 对 象 提供 了 insertBefore() 方 法 , 帮助 开发 者 为 节点 对 象 的 指定 子 节点 之 前 添加 
一 个 新 的 子 节点 ， 其 使 用 方式 如 下 所 示 。 


ElLement .insertBefore ( NewNode , ExistingChildNode ) ; 


在 上 面 的 伪 代 码 中 ，Element 关键 字 表 示 目 标的 DOM 节点 对 象 ， NewNode 关键 字 表 
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示 要 添加 的 DOM 子 节点 对 象 ，ExistingChildNode 关键 字 表 示 已 存在 的 子 节点 对 象 ， 该 命 
令 的 结果 就 是 在 ExistingChildNode 子 节点 对 象 之 前 添加 NewNode 子 节点 。 


例如 ,在 下 面 的 代码 中 ,建立 了 一 个 无 序列 表 ， 并 为 其 定义 了 若干 子 节点 ,代码 如 下 。 


<ul id="Sites"> 
<1i id="tup"> 
<a href="http://tup.tsinghua.edu.cn/"” title=" 清 华 大 学 出 版 社 "> 清 华 大 学 
出 版 社 </a> 
</1i> 
<li id="tlib"> 
<a href="http://1lib.tsinghua.edu.cn/dra/" title=" 清 华 大 学 图 书馆 "> 清华 
大 学 图 书馆 </1i> 


</ul> 


如 果 需 要 按照 指定 的 格式 为 该 列表 的 “清华 大 学 出 版 社 ” 之 后 、“ 清 华 大 学 图 书馆 ” 


之 前 添加 一 个 新 的 节点 ， 则 可 以 通过 以 下 代码 实现 。 


村: 


var objSites = document .getElementById ( "Sites' ) ; 

var objExistChild = document .getElementById ( 'tlib' ) ; 

Var objTNews = document .createElement ( '1i1' ) ; 

var strTNewsLink = '<a href="http://news.tsinghua.edu.cn/" title=" 清 华 大 学 
新 闻 网 "> 清华 大 学 新 闻 网 </a>' ， 

objTNews.id = 'tnews' ; 

objTNews.innerHTML = strTNewsLink ; 

objSites.insertBefore ( objTNews , objExistChild ) ; 


在 上 面 的 代码 中 ， 首 先 实例 化 了 无 序列 表 、 无 序列 表 中 第 二 个 Element 节点 ， 并 创建 


-个 列表 项 目的 节点 对 象 ， 定 义 了 该 节点 对 象 的 属性 和 内 容 ， 最 后 ， 通 过 insertBefore() 


方法 将 创建 的 节点 对 象 插入 到 无 序列 表 中 。 


。 向 后 追加 子 节点 
如 果 仅 需要 在 节点 对 象 子 节点 的 末尾 追加 一 个 新 的 节点 ， 则 可 以 使 用 Element 对 象 提 


供 的 appendChild0 方 法 ， 该 方法 相 比 insertBefore() 方 法 更 加 简单 ， 可 以 直接 对 DOM 对 象 
的 子 节点 进行 操作 ， 无 需 指定 特定 的 位 置 ， 其 使 用 方法 如 下 所 示 。 


Element .appendChild ( NewNode ) ; 


在 上 面 的 伪 代 码 中 ，Element 关键 字 表示 目标 的 DOM 节点 对 象 ，NewNode 关键 字 表 


示 要 添加 的 DOM 子 节点 对 象 。 例 如 ， 同 样 对 上 一 个 实例 进行 操作 ， 将 清华 大 学 官方 网 站 
添加 到 该 无 序列 表 的 末尾 ， 代 码 如 下 。 


Var objSites = document .getElementById ( "Sites' ) ; 

Var objTWeb = document .createElement ( '1i' ) ; 

var strTWebLink = '<a href="http://www.tsinghua.edu.cn/" title=" 清 华 大 学 "> 
清华 大 学 </a>' ， 

objTWeb.id = 'tWeb' ; 

objTWeb.innerHTML = strTWebLink ; 
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objSites .appendChild( objTWeb ) ; 


。 移 除 子 节点 
element 对 象 提供 了 removeChild0 方 法 ， 帮 助 开发 者 移 除 指定 节点 的 某 个 子 节点 ， 其 
使 用 方式 与 appendChild0 类 似 ， 如 下 所 示 。 


Element.removeChild ( Node ) ; 


在 上 面 的 伪 代 码 中 ，Element 关键 字 表示 目标 的 DOM 节点 对 象 ，Node 关键 字 表 示 要 
删除 的 DOM 子 节点 对 象 。 在 执行 该 语句 后 ， 如 果 删 除 成 功 ， 则 Javascript 将 返回 被 删除 的 
节点 ， 和 否则 将 返回 一 个 null。 

例如 , 在 下 面 的 XHTML 代码 中 就 包含 了 一 个 Web 开发 技术 的 列表 ， 其 包含 了 三 种 语 
言 ， 代 码 如 下 。 


<ul id="Web"> 
<1i id="js">Javascript</1i> 
<1i id="css">CSS</1i> 
<1i id="html">HTML</1i> 
</ul> 


在 上 面 的 代码 中 ， 为 无 序列 表 定义 了 三 个 子 节点 ， 如 果 需 要 删除 其 中 第 二 个 节点 ， 则 
可 以 首先 将 列表 和 要 删除 的 子 节点 转换 为 DOM 节点 对 象 ， 然 后 调用 removeChild0 方 法 ， 
代码 如 下 所 示 。 


var objWebList = document .getElementById ( "Web' ) ; 


var objCSSNode = document .getElementById ( "css' ) ; 
objWebList.removeChild ( objCSSNode ) ; 


6. 判断 节点 


在 实际 开发 中 ， 开 发 者 可 能 经 常 需 要 对 各 种 DOM 节点 进行 判断 ， 根 据 判断 的 结果 来 
进行 操作 。element 对 象 提供 了 三 种 方法 ,帮助 开发 者 对 这 些 即时 的 信息 进行 判断 ， 并 返回 
判断 结果 。 

。 判断 是 否 包含 子 节点 

element 对 象 提供 了 hasChildNodes() 方 法 , 帮助 开发 者 判断 某 一 个 Element 类 型 的 DOM 
节点 是 否 包含 子 节点 。 如 果 DOM 节点 包含 任意 子 节点 ， 则 该 方法 返回 逻辑 真 (true)， 否 
则 返回 逻辑 假 (false)。 

例如 ,在 下 面 的 代码 中 定义 了 三 个 文本 段落 ， 其中, 第 一 个 文本 段落 不 包含 任何 内 容 ， 
第 二 个 文本 段落 包含 一 个 半角 空格 ， 第 三 个 文本 段落 包含 一 段 文 本 和 一 个 超 链接 标记 A， 
代码 如 下 。 


<p id="NoChild"></p> 

<p id="SpaceChild"> </p> 

<p id="HasChild"> 欢 迎 访问 <a href="http://tup.tsinghua.edu.cn" title=" 清 华 大 
学 出 版 社 "> 清华 大 学 出 版 社 </a></P> 
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通过 hasChildNodes(0) 方 法 ， 可 以 方便 地 判断 以 上 三 种 类 型 的 DOM 节点 对 象 的 子 节点 
状况 ， 代 码 如 下 。 


Var objNoChild = document .getElementByYId ( 'NoChild' ) ; 

Var objSpaceChild = document .getElementBylId ( 'SpaceCchild' ) ; 
var objHasChild = document .getElementBylId ( 'HasChild' ) ; 
console.log ( objNoChild.hasChildNodes ( ) ) ; // 输 出 false 
console.1og ( objSpaceChild.hasChildNodes ( ) ) ; // 输 出 true 
console.log ( objHasChild.hasChildNodes ( ) ) ; // 输 出 true 


hasChildNodes() 方 法 可 以 判断 DOM 节点 对 象 下 的 任意 类 型 子 节点 ， 包 括 Element、 
Text、Attribute 等 ， 因 此 ， 当 HTML 或 XHTML 的 节点 标记 包含 一 个 空格 字符 时 ， 
hasChildNodes() 方 法 会 将 空格 字符 识别 为 Text 类 型 子 节点 。 

。 判断 两 节点 是 否 相 等 

element 对 象 提供 了 isEqualNode() 方 法 ， 可 以 帮助 开发 者 判断 两 个 节点 的 内 容 是 否 完 
全 相同 ， 该 方法 可 以 对 两 个 节点 的 内 容 、 子 节点 进行 全 匹配 ， 然 后 输出 匹配 的 结果 ， 其 使 
用 方式 如 下 所 示 。 


Nodel.isEqualNode ( Node2 ) ; 


在 上 面 的 伪 代 码 中 ，Nodel 关键 字 表 示 要 匹配 的 第 一 个 节点 ，Node2 关键 字 表示 要 匹 
配 的 第 二 个 节点 。 如 果 两 个 节点 相等 ， 将 返回 逻辑 真 (tue)， 和 否则 返回 逻辑 假 (false)。 例 
如 , 在 下 面 的 代码 中 , 包含 一 个 无 序列 表 标 记 UL, 该 标记 包含 三 个 Element 类 型 的 子 节点 ， 
代码 如 下 。 

<ul id="test"> 

<li>test1</1i> 
<li>test2</1i> 


<li>test1</1i> 
</ul> 


在 上 面 的 代码 中 ， 定 义 了 三 个 列表 项 目标 记 LI， 通 过 element 对 象 的 isEqualNode() 方 
法 , 可 以 方便 地 判断 第 一 个 列表 项 目标 记 LI 与 之 后 两 个 列表 项 目标 记 是 否 相 等 ,代码 如 下 。 


var objList = document .getElementById ( 'test' ) ; 


Var objElementl1 = objList.getElementsByTagName ( "li' ) [0 ] 
var objElement2 = objList.getElementsByTagName ( '1i' ) [1];D 
Var objElement3 = objList.getElementsByTagName ( '1i' ) [2];，D 
console.log ( objElement1.isEqualNode ( objElement2 ) ) ; // 输 出 false 


console.log ( objElement1.isEqualNode ( objElement3 ) ) ; // 输 出 true 


由 以 上 代码 可 以 得 知 , 该 无 序列 表 中 , 第 一 个 列表 项 目 与 第 二 个 列表 项 目 内 容 不 一 致 ， 
但 与 第 三 个 列表 项 目的 内 容 完 全 一 致 。 

。 判断 两 节点 对 象 是 否 指向 同一 节点 

在 实际 的 开发 中 ， 开 发 者 有 可 能 需要 判断 两 个 DOM 节点 对 象 的 实例 是 否 指向 一 个 相 
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同 的 XHTML 或 HTML 节点 标记 ， 此 时 ， 就 需要 使 用 element 对 象 的 isSameNode() 方 法 来 
对 这 两 个 节点 对 象 的 实例 进行 判断 ， 其 使 用 方式 如 下 所 示 。 


Nodel.isSameNode ( Node2 ) ; 


在 上 面 的 伪 代 码 中 ，Nodel 关键 字 表示 一 个 节点 对 象 的 实例 ，Node2 关键 字 表示 需要 
判断 是 否 与 Nodel 节点 对 象 实例 指向 相同 XHTML 或 HTML 节点 标记 的 节点 对 象 实例 。 
如 果 判 断 这 两 个 节点 对 象 实例 指向 相同 的 XHTML 或 HTML 节点 标记 , 该 方法 将 返回 逻辑 
真 (true)， 否 则 将 返回 逻辑 假 (false)。 

例如 ， 在 下 面 的 代码 中 ， 定 义 了 一 个 定义 列表 DL， 并 为 定义 列表 定义 了 定义 词 条 DT 
和 定义 解释 DD， 书 写 了 内 容 并 定义 了 id 属性 ， 代 码 如 下 。 

<dl id="DefinitionList"> 

<dt>XHTML</dt> 
<dd>Extensible HyperText Markup Language</dd> 
<qt>CSS</dt> 
<dd>Cascading Style Sheets</dd> 
</dl> 


在 上 面 的 代码 中 ， 包 含 了 三 个 Element 类 型 的 节点 对 象 ， 在 下 面 的 代码 中 ， 将 依次 把 
这 三 个 节点 对 象 实例 化 并 进行 比较 ， 代 码 如 下 。 


var objDL = document .getElementById ( 'DefinitionList' ) ; 
var objDT1 = objDL.firstChild.nextSibling ; 

var objDT2 document .getElementsByTagName ( "qt' ) [0 ] 
var objDT3 document .getElementsByTagName ( 'dt' ) [11] 
console.log ( objDT1.isSameNode ( objDT2 ) ) ; // 输 出 true 
console.log ( objDT1.isSameNode ( objDT3 ) ) ; // 输 出 false 


在 上 面 的 代码 中 ， 首 先 两 次 通过 不 同 的 方式 来 获得 定义 列表 中 的 第 一 个 定义 词 条 标 
记 ， 然 后 又 获得 第 二 个 定义 词 条 ， 并 进行 比较 ， 最 后 输出 比较 的 结果 。 


6.3 处理 交互 事件 


事件 是 面向 对 象 编程 的 又 一 特性 ， 其 作用 是 记录 用 户 端的 交互 行为 ， 根 据 这 一 交互 行 
为 触发 指定 的 脚本 操作 。 在 前 端 开发 领域 ， 开 发 者 可 以 通过 HTML 和 Javascript 的 结合 ， 
调用 丰富 的 脚本 资源 来 对 前 端 用 户 的 操作 及 时 做 出 反馈 。 


6.3.1 事件 的 原理 
早期 的 计算 机 软件 往往 为 命令 行 模式 ， 并 没有 所 谓 可 视 化 界面 。 当 时 的 软件 程序 往往 


是 面向 过 程 且 为 单 任务 模式 ， 也 就 是 说 一 个 程序 在 被 执行 后 将 一 直 持 续 执行 ， 直 至 任务 
结束 。 此 时 的 软件 中 处 理 的 各 种 数据 往往 已 经 被 开发 者 或 用 户 预先 输入 完毕 ， 因 此 在 软 
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件 的 执行 过 程 中 ， 不 存在 于 用 户 进行 数据 交互 的 概念 ， 也 不 需要 对 各 种 突 发 的 情况 进行 
处 理 。 2 

随 着 多 任务 程序 的 出 现 以 及 可 视 化 的 用 户 界面 的 产 。 提 全 对 二 内 
生 ， 原 本 由 程序 与 数据 之 间 的 交互 逐渐 被 转变 为 程序 与 用 或 页 的 
户 之 间 的 交互 ， 随 时 获取 用 户 的 操作 数据 并 及 时 进行 反馈 J 
对 计算 机 软件 而 言 就 愈 发 重要 。 基 于 这 一 需求 ， 软 件 开发 Me 
者 们 设计 了 一 个 经 典 的 抽象 模型 ， 即 事件 模型 ， 通 过 这 一 芭 吕 役 孜 
抽象 模型 来 解决 计算 机 软件 的 用 户 交互 问题 。 的 

事件 是 一 种 解决 用 户 交互 的 经 典 模型 ， 其 可 分 为 三 个 软件 | 
步骤 ， 即 触发 ~ 捕获 ~ 处 理 。 这 三 个 步骤 构成 了 一 个 完整 
的 交互 过 程 ， 步 又 之 间 的 关系 以 及 用 途 如 图 6-2 所 示 。 

。 事件 的 触发 

事件 的 触发 过 程 是 指 用 户 在 程序 的 交互 界面 中 对 各 种 
可 视 元 素 进 行 交互 操作 (包括 鼠标 操作 和 键盘 操作 ), 或 计 “ 然 划 ;不 人 
算 机 软件 进行 某 些 指定 运算 的 过 程 ， 是 整个 事件 流程 的 起 ”提供 反馈 信息 
始 阶段 。 具 体 到 Web 前 端 开发 领域 ， 就 是 用 户 对 Web 页 
面 中 的 各 种 显示 元 素 进行 鼠标 、 键 盘 操 作 ， 或 浏览 器 加 载 
页 面 、 转 移 焦点 的 过 程 。 这 一 过 程 主要 由 用 户 操作 HTML 
或 XHTML 的 显示 元 素来 完成 。 

。 事件 的 捕获 

事件 的 捕获 过 程 是 指 事件 触发 后 ， 计 算 机 软件 通过 即 
时 的 监听 机 制 获取 事件 触发 后 产生 的 各 种 信息 的 过 程 。 在 
这 一 过 程 中 , 计算 机 软件 捕获 的 信息 主要 包括 三 种 , 即 事件 的 目标 (触发 事件 的 交互 元 素 )、 
事件 的 类 型 〈 例 如 鼠标 事件 、 键 盘 事件 等 ) 以 及 事件 传递 的 其 他 信息 〈 例 如 提交 的 文本 数 
据 、 事 件 交 互 元 素 自身 带 有 的 各 种 参数 信息 等 )。 

具体 到 Web 前 端 开 发 中 ， 这 一 过 程 通常 由 Web 浏览 器 来 实现 ， 现 代 的 Web 浏览 器 往 
往 会 即时 提供 捕获 事件 的 事件 引擎 ， 快 速 截获 触发 事件 后 的 各 种 信息 。 

。 事件 的 处 理 

在 捕获 事件 后 ， 计 算 机 软件 还 需要 通过 指定 的 脚本 对 事件 传递 来 的 信息 数据 进行 处 理 
和 运算 , 并 根据 预 设 的 脚本 功能 决定 是 否 反 馈 处 理 和 运算 的 结果 。 具体 到 Web 前 端 开发 中 ， 
一 过 程 由 前 端 开 发 的 脚本 语言 〈 即 Javascript) 来 实现 。 通 过 Javascript 处 理 浏 览 器 传递 
而 来 的 数据 ， 最 终 决定 提交 到 服务 器 或 做 出 反馈 ， 反 馈 的 操作 也 只 能 由 Javascript 实现 。 


处 理 


图 6-2 事件 模型 的 构成 及 关系 


6.3.2 ”Javascript 事件 类 型 


Javascript 具有 和 Web 交互 紧密 结合 的 事件 体系 ， 同 时 ， 几 乎 所 有 的 Javascript 脚本 代 
码 均 通过 事件 被 绑 定 到 XHTML 和 HTML 的 显示 元 素 和 用 户 对 Web 文档 的 各 种 操作 上 。 
因此 从 另 一 个 角度 来 讲 ，Javascript 是 一 种 基于 事件 响应 而 执行 代码 的 脚本 语言 

根据 事件 交互 来 源 ， 可 以 将 所 有 Javascript 事件 分 为 四 种 类 型 ， 即 鼠标 事件 、 键 盘 事 
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件 、 表 单 事件 和 浏览 器 事件 。 这 些 事件 通过 XHTML 和 HTML 的 句柄 属性 与 Javascript 进 
行 绑 定 ， 从 而 调用 Javascript 的 代码 。 


1. 鼠标 事件 


鼠标 事件 顾名思义 ,是 由 用 户 使 用 鼠标 对 Web 元 素 进行 操作 而 触发 的 事件 ,在 XHTML 
和 HTML 标记 语言 中 ， 为 鼠标 事件 提供 了 以 下 句柄 属性 ， 如 表 6-15 所 示 。 
表 6-15 XHTML 和 HTML 中 的 鼠标 句柄 属性 


句柄 属性 触发 方式 

ondblclick 鼠标 按键 双击 

onmousemove ”鼠标 光标 移动 

onmouseover ”鼠标 光标 被 移动 至 某 显示 元 素 上 


句柄 属性 触发 方式 

onclick 鼠标 按键 单 击 
onmousedown ”鼠标 按键 被 按 下 
onmouseout 鼠标 光标 从 某 元 素 移 开 
onmouseup 鼠标 按键 被 弹 起 


需要 注意 的 是 ,以 上 这 些 句 柄 属性 都 是 XHTML 和 HTML 的 属性 ,因此 其 不 应 被 添加 
到 Javascript 事件 中 , 而 是 应 被 添加 到 XHTML 和 HTML 的 标记 中 。 例如 , 为 一 个 XHTML 
按钮 添加 鼠标 事件 的 句柄 属性 ， 并 定义 执行 一 个 名 为 ShowData0 的 Javascript 函数 ， 代 码 
如 下 。 


<button id="show data" type="button" onclick="javascript:ShowData();"> 显 
示 数 据 </button> 


在 上 面 的 代码 中 ， 就 为 id 为 show_data 的 BUTTON 标记 添加 了 onclick 句柄 属性 ， 并 
为 句柄 属性 定义 了 脚本 属性 值 。 

在 此 需要 注意 的 是 ，onclick 和 onmousedown 两 种 鼠标 事件 是 有 区 别 的 ，onclick 事件 
由 鼠标 单 击 后 立刻 弹 起 时 触发 , 而 onmousedown 鼠标 事件 则 只 能 在 鼠标 长 按 且 不 弹 起 的 时 
候 触 发 。 


2. 键盘 事件 


键盘 事件 是 由 用 户 使 用 键盘 按键 时 触发 的 事件 , 其 同样 需要 由 XHTML 和 HTML 标记 
的 句柄 属性 驱动 。 目 前 XHTML 或 HTML 支持 三 种 类 型 的 键盘 事件 , 其 分 别 为 onkeydown、 
onkeypress 和 onkeyup。 

其 中 ，onkeydown 句柄 属性 由 用 户 操作 键盘 长 按 某 个 按键 时 触发 ，onkeypress 句柄 属 
性 由 用 户 操作 键盘 按 下 某 个 按键 并 弹 起 后 触发 ，onkeyup 句柄 属性 由 用 户 操作 键盘 在 按 住 
某 个 按键 后 弹 起 该 按键 时 触发 。 

在 Web 前 端 开 发 中 ， 键 盘 事件 通常 有 两 种 用 途 : 一 种 是 通过 监听 用 户 对 键盘 的 操作 ， 
执行 对 应 的 脚本 代码 ; 另 一 种 则 是 通过 事件 的 keyCode 属性 〈 仅 正 浏览 器 支持 ) 获取 按键 
的 Unicode 字符 码 ， 从 而 确定 用 户 操作 的 是 键盘 中 的 哪 一 个 按键 ， 进一步 执行 相关 的 脚本 。 


3. 表单 事件 


表单 是 Web 浏览 器 最 基本 的 用 户 交 互 控件 , 在 之 前 的 章节 中 已 经 介绍 过 XHTML 的 表 
单 标记 以 及 对 应 的 表单 控件 作用 。 这 些 控件 支持 以 下 几 种 事件 句柄 属性 ， 如 表 6-16 所 示 。 
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表 6-16 XHTML 和 HTML 中 的 表单 句柄 属性 
句柄 属性 ”触发 方式 

onreset 表单 的 重 置 按钮 被 单 击 
onsubmit 表单 的 提交 按钮 被 单 击 


句柄 属性 ”触发 方式 
onchange ”表单 的 内 容 被 更 改 
onselect 表单 内 的 文本 被 选中 


需要 注意 的 是 ， 以 上 这 些 句柄 属性 仅 对 表单 类 的 XHTML 标记 有 效 ， 而 并 非 像 其 他 事 
件 句柄 属性 一 样 被 绝 大 多 数 XHTML 标记 支持 。 例 如 ，onchange 句柄 属性 仅 被 输入 组 件 
INPUT、 选 择 组 件 SELECT 以 及 文本 域 组 件 TEXTAREA 支持 ，onselect 句柄 属性 仅 被 内 含 
文本 的 输入 组 件 INPUT 和 文本 域 组 件 TEXTAREA 支持 ， 而 其 他 两 种 句柄 属性 则 仅 被 表单 
标记 FORM 支持 。 


4. 浏览 器 事件 


浏览 器 事件 是 指 由 Web 浏览 器 触发 ， 或 对 Web 浏览 器 进行 一 些 指定 的 操作 而 触发 的 
事件 。 虽然 不 同类 型 的 Web 浏览 器 可 能 对 浏览 器 事件 的 支持 有 一 些微 小 的 区 别 , 但 是 在 通 
常情 况 下 , XHTML 和 HTML 的 这 些 事件 句柄 属性 都 能 被 绝 大 多 数 Web 浏览 器 支持 。 目 前 ， 
XHTML 和 HTML 的 浏览 器 事件 句柄 属性 主要 包括 以 下 几 种 ， 如 表 6-17 所 示 。 

表 6-17 XHTML 和 HIML 中 的 事件 句柄 属性 
句柄 属性 ”触发 方式 
onblur Web 元 素 失去 焦点 
onfocus Web 元 素 获得 焦点 
onresize Web 浏览 器 尺寸 被 调整 


句柄 属性 ”触发 方式 

onabort 图 像 加 载 被 中 断 

onerror 外 部 文档 或 图 像 加 载 错误 
onload 文档 或 图 像 加 载 完成 
onunload ”退出 和 关闭 当前 页 面 


浏览 器 事件 更 多 地 是 通过 捕获 用 户 操作 或 内 容 加 载 状态 ， 为 脚本 提供 一 个 判断 的 依 
据 ， 因 此 其 使 用 往往 受到 标记 类 型 的 限制 。 其 中 ，onabort 属性 仅 被 图 像 标记 IMG 支持 ; 
onerror 属性 仅 被 图 像 标 记 IMG、 对 象 标记 OBJECT 以 及 样式 标记 STYLE 支持 ，onload 属 
性 仅 被 主体 标记 BODY、 框 架 标记 FRAME 、 框 架 集 标记 FRAMESET、 嵌 入 框架 标记 
IFRAME、 图 像 标记 IMG、 超 链接 标记 LINK 和 脚本 标记 SCRIPT 支持 ，onunload 属性 仅 
被 主体 标记 BODY、 框 架 标记 FRAME 支持 。 

焦点 是 Web 浏览 器 中 一 个 特殊 的 位 置 标 记 。 通 常情 况 下 ， 焦 点 会 激活 超 链接 、 图 像 、 
多 媒体 内 容 以 及 表单 控件 ， 允 许 用 户 通 过 键盘 对 这 些 元 素 进行 操作 ， 例 如 打开 超 链 接 、 显 
示 图 像 的 源 文件 、 播 放 多 媒体 内 容 或 对 表单 控件 进行 操作 等 。 一 个 Web 浏览 器 窗口 只 能 存 
在 一 个 焦点 ， 焦 点 仅 在 Web 浏览 器 窗口 处 于 激活 状态 时 可 用 。onblue 句柄 属性 和 onfocus 
句柄 属性 可 以 监视 Web 元 素 ， 在 Web 元 素 获取 或 失去 焦点 时 执行 对 应 的 脚本 。 

onresize 句柄 属性 的 使 用 相 比 之 前 六 种 句柄 属性 更 加 自由 一 些 ， 其 可 以 被 绑 定 在 绝 大 
多 数 Web 元 素 中 ， 并 在 Web 浏览 器 的 窗口 尺寸 被 改变 时 触发 。 

除了 以 上 四 种 类 型 的 事件 外 ,在 正 浏览 器 下 还 支持 一 些 其 他 特殊 事件 ， 例 如 
onpropertychange、onfilterchange、oninput 等 ， 这 些 事件 为 正 浏览 器 专属 的 事件 ， 并 不 被 
其 他 Web 浏览 器 所 支持 ， 在 此 不 再 袭 述 。 
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6.3.3 ”Javascript 事件 对 象 


作为 一 种 主要 用 于 Web 前 端 开发 的 面向 对 象 编程 的 脚本 语言 ，Javascript 将 当前 触发 
的 事件 状态 视 为 一 个 对 象 ， 即 Event 对 象 ， 并 为 该 对 象 提供 了 属性 和 方法 ， 用 于 对 事件 的 
状态 进行 处 理 。Event 对 象 代表 了 时 间 的 状态 和 其 中 产生 的 各 种 数据 ， 其 通常 与 函数 结合 
使 用 ， 通 过 函数 来 执行 。 

Event 对 象 的 意义 在 于 ， 可 以 将 传统 的 XHTML 或 HTML 标记 绑 定 事件 转换 为 完全 通 
过 Javascript 脚本 代码 来 实现 绑 定 的 模式 , 从 而 降低 XHTML 或 HTML 与 Javascript 脚本 代 
码 的 耦合 性 ， 更 进一步 地 实现 松 耦 合式 的 开发 。 

1. Event 对 象 的 属性 

Event 对 象 与 其 他 Javascript 对 象 相似 ， 都 包含 了 大 量 的 属性 ， 为 开发 者 提供 事件 执行 
时 产生 的 各 种 数据 信息 ， 其 主要 包括 标准 属性 、 键 盘 属 性 和 鼠标 属性 。 

。 标准 属性 

Event 对 象 的 标准 属性 包括 四 种 ， 主 要 用 于 处 理事 件 本 身 的 各 种 信息 ， 例 如 处 理 冒 泡 
时 间 、 获 取 事 件 源 的 各 种 信息 等 ， 如 表 6-18 所 示 。 

表 6-18 Event 对 象 的 标准 属性 


属性 作用 

cancelBubble 正 专属 属性 ， 当 其 值 为 tue 时 ， 将 禁止 事件 传递 到 事件 源 内 顽 的 对 象 
returnValue 定义 或 获取 从 事件 中 返回 的 值 

srcElement/target 获取 触发 事件 的 Web 元 素 本 身 

type 获取 触发 的 事件 类 型 


在 默认 状态 下 ，Web 浏览 器 允许 父 元 素 将 事件 传递 给 子 元 素 ， 但 当 设置 事件 的 
cancelBubble 属性 值 为 tue 时 ， 此 种 事件 传递 方式 会 被 屏蔽 。 需 要 注意 的 是 ， 这 一 属性 为 
下 专属 ， 其 他 Web 浏览 器 均 不 支持 此 属性 。 

同 理 ， 在 默认 状态 下 ，Web 浏览 器 会 自动 根据 用 户 的 交互 操作 执行 一 些 行为 ， 例 如 单 
击 超 链 接 标记 时 会 跳 转 到 该 超 链 接 标 记 的 href 属性 值 所 指向 的 URL 地 址 ， 如 果 在 触发 该 
事件 时 定义 其 retumValue 属性 为 false， 则 该 行为 就 会 被 取消 。 

srcElement/target 属性 是 只 读 属性 ， 其 作用 是 获取 事件 源 的 XHTML 或 HTML 对 象 。 
这 两 个 属性 的 区 别 在 于 ， 早 期 的 正 浏览 器 不 支持 target 属性 ， 只 支持 srcElement 属性 ， 而 
其 他 的 Web 浏览 器 则 只 支持 target 属性 ， 不 支持 srcElement 属性 。 但 是 随 着 正 浏览 器 的 
发 展 , 在 正 10.0 及 之 后 更 高 版 本 的 正 浏览 器 已 经 完全 与 其 他 浏览 器 保持 一 致 , 支持 target 
属性 了 ,因此 在 开发 Javascript 脚本 时 ,除非 需要 兼容 旧版 本 下 浏览 器 ,否则 推荐 使 用 target 

type 属性 同样 是 一 个 只 读 属性 ， 其 作用 是 获取 事件 句柄 属性 ， 其 输出 的 将 是 一 个 字符 
串 类 型 数据 。 需 要 注意 的 是 ，type 属性 输出 的 值 是 没有 “on” 前 缀 的 ， 例 如 ， 当 事件 的 句 
柄 属性 为 onclick 时 ， 其 type 属性 值 将 为 click， 而 当 事 件 的 句柄 属性 为 onmouseover 时 ， 
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其 type 属性 值 将 为 mouseover。 

。 键盘 属性 

键盘 属性 是 针对 用 户 进行 键盘 操作 时 触发 事件 所 获取 的 信息 ， 其 可 以 获得 用 户 按 下 的 
键盘 按键 名 称 或 类 型 ， 从 而 帮助 脚本 判断 和 执行 某 些 特殊 功能 。 常 用 的 Event 对 象 的 键盘 
属性 主要 包括 四 种 ， 如 表 6-19 所 示 。 


表 6-19 常用 的 Event 对 象 的 键盘 属性 


属性 作用 

altKey 获取 事件 触发 时 用 户 键盘 上 Alt 键 的 状态 

ctrlIKey 获取 事件 触发 时 用 户 键盘 上 Ctrl 键 的 状态 
keyCode ”获取 事件 触发 的 键盘 按键 对 应 字符 的 Unicode 编码 
shiftKey ”获取 事件 触发 时 用 户 键 盘 上 Shift 键 的 状态 


altKey 属性 、ctrlKey 属性 以 及 shiftKey 属性 都 会 返回 一 个 逻辑 型 数据 ， 当 其 值 为 逻辑 
真 时 ， 表 示 在 事件 触发 时 ， 对 应 的 功能 键 处 于 按 下 状态 ， 而 当 其 值 为 逻辑 假 时 ， 则 表示 在 
事件 触发 时 ， 对 应 的 功能 键 处 于 弹 起 状态 。 利 用 这 三 种 属性 ， 开 发 者 可 以 用 逻辑 值 true、 
false 或 数字 1 和 0 与 其 进行 比较 ， 判 断 当 事件 触发 时 是 否 按 住 了 这 三 个 功能 键 。 

keyCode 属性 最 初 仅 为 正 浏览 器 的 专 有 属性 ， 然 后 其 他 的 Web 浏览 器 也 逐渐 加 入 支 
持 ， 目 前 多 数 主 流 Web 浏览 器 均 已 经 可 以 使 用 该 属性 。 需 要 注意 的 是 ， 该 属性 返回 的 并 非 
键盘 按键 本 身 ， 而 是 将 其 转换 为 Unicode 编码 之 后 的 数字 代码 。 通 过 该 属性 ， 开 发 者 可 以 
方便 地 获得 用 户 在 事件 中 按 下 的 具体 按键 信息 。 关 于 键盘 键 位 上 的 字符 及 其 对 应 的 
Unicode 编码 ， 请 自行 参考 相关 资料 ， 在 此 不 再 袭 述 。 

。 鼠标 属性 

鼠标 属性 是 鼠标 事件 触发 时 事件 对 象 获取 的 各 种 信息 ， 多 用 于 判断 鼠标 按键 、 鼠 标 位 
置 以 及 鼠标 操作 的 相关 DOM 对 象 等 。 常 用 的 Event 对 象 的 鼠标 属性 主要 包括 11 种 ， 如 表 
6-20 所 示 。 


表 6-20 ”常用 的 Event 对 象 鼠 标 属性 


属性 属性 值 作用 
button 0 默认 值 ， 未 按 下 任何 鼠标 键 

1 按 下 鼠标 左 键 

按 下 鼠标 右键 

3 同时 按 下 鼠标 左 键 和 右键 

4 按 下 鼠标 中 键 

5 按 下 鼠标 左 键 和 中 键 

6 按 下 鼠标 右键 和 中 键 

入 按 下 所 有 鼠标 按键 〈 包 括 左 键 、 右 键 和 中 键 ) 
clientX 数字 获取 事件 触发 时 鼠标 指针 相对 于 Web 浏览 器 页 面 的 水 平 坐标 
clientY 数字 获取 事件 触发 时 鼠标 指针 相对 于 Web 浏览 器 页 面 的 生 直 坐标 
fromElement ”HTML 对 象 ” 当 事件 句柄 属性 为 onmouseover 或 onmouseout 时 获取 鼠标 移出 的 元 素 
offsetX 数字 获取 事件 触发 时 鼠标 指针 相对 于 事件 源 对 象 的 水 平 坐标 
offsetY 数字 获取 事件 触发 时 鼠标 指针 相对 于 事件 源 对 象 的 垂直 坐标 


screenX 数字 只 读 属性 ， 获 取 事 件 触发 时 鼠标 指针 的 水 平 位 置 
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续 表 

属性 属性 值 作用 

screenY 数字 只 读 属性 ， 获 取 事件 触发 时 鼠标 指针 的 垂直 位 置 

toElement HTML 对 象 ” 当 事件 句柄 属性 为 onmouseover 或 onmouseout 时 获取 鼠标 移入 的 元 素 

数字 获取 鼠标 相对 于 CSS 属性 中 具有 position 属性 的 父 Web 元 素 的 水 平 坐 
标 , 如 没有 CSS 属性 中 具有 position 属性 的 父 Web 元 素 , 则 默认 以 BODY 
标记 为 参考 对 象 

y 数字 获取 鼠标 相对 于 CSS 属性 中 具有 position 属性 的 父 Web 元 素 的 垂直 坐 
标 , 如 没有 CSS 属性 中 具有 position 属性 的 父 Web 元 素 , 则 默认 以 BODY 
标记 为 参考 对 象 


事件 对 象 的 button 属性 目前 仅 支 持 三 键 鼠 标 ， 可 以 获取 三 键 鼠 标 任意 组 合 的 鼠标 键 按 
下 信息 ， 但 无 法 获取 一 些 带 有 自 定义 功能 键 的 鼠标 的 操作 信息 。 同 时 ， 该 属性 是 只 读 的 ， 
开发 者 不 能 修改 该 属性 的 值 以 实现 鼠标 键 按 下 的 效果 。 

fromElement 和 toElement 两 个 属性 仅 当 事件 句柄 属性 为 onmouseover 或 onmouseout 
时 可 用 ， 用 于 获取 鼠标 在 滑 入 和 滑 出 时 通过 的 HIML 对 象 。 

clientX、clientY、offsetX、offsetY、screenX、screenY 以 及 x、y 八 种 属性 均 用 于 获取 
鼠标 指针 的 位 置 ， 但 其 参照 物 由 所 区 别 : clientX 和 clientY 属性 获取 的 是 鼠标 指针 相对 于 
浏览 器 窗口 显示 区 域 的 坐标 ， 其 显示 区 域 不 包括 浏览 器 窗口 自身 的 控件 和 深 动 条 ;offsetX 
和 offsetY 属性 获取 的 是 鼠标 指针 相对 于 触发 事件 的 Web 元 素 的 坐标 ; screenX 和 screenY 
属性 获取 的 是 鼠标 指针 相对 于 用 户 显示 器 屏幕 的 坐标 x 和 y 属性 获取 的 是 其 相对 于 文档 
左上 角 的 坐标 。 在 实际 进行 开发 时 ， 使 用 这 四 组 属性 时 应 注意 其 参照 物 的 区 别 。 


2. Event 对 象 的 方法 


早期 版 本 的 各 种 Web 浏览 器 在 事件 处 理 方式 上 与 W3C 的 标准 有 很 大 的 区 别 ， 所 以 很 
多 W3C 的 Event 标准 属性 并 未 得 到 多 数 Web 浏览 器 的 支持 。 因 此 ， 使 用 Javascript 事件 时 
往往 需要 开发 者 将 事件 句柄 属性 添加 到 XHTML 或 HTML 的 标记 上 , 通过 标记 来 绑 定 事件 。 
例如 ， 为 一 个 按钮 绑 定 一 个 事件 ， 输 出 按钮 的 名 称 ， 需 要 首先 定义 该 按钮 的 句柄 属性 ， 如 
下 所 示 。 


<p> 

<button type="button" name="test" id="test" onclick="javascript: 
showName ();"></button> 
</p> 


然后 ， 再 通过 Javascript 编写 showName0O 的 函数 代码 ， 实 现 应 用 逻辑 ， 如 下 所 示 。 


function showName ( ) { 
alert ( event.target.name ) ; 


} 

以 上 这 种 方式 的 优势 在 于 其 代码 十 分 简洁 ， 也 十 分 容易 理解 ， 短 短 的 几 行 代码 就 可 以 
完全 实现 程序 功能 。 对 于 一 些 简 单 并 且 仅 具 备 少数 交互 的 小 型 Web 站 点 而 言 ， 使 用 这 种 方 
式 可 以 最 大 限度 节约 开发 周期 和 成 本 。 
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但 是 这 种 方式 的 问题 在 于 ， 其 通过 句柄 属性 绑 定 的 事件 是 永久 的 ， 不 能 解 绑 。 另 外 ， 
这 种 绑 定 机 制 将 Javascript 事件 代码 与 XHTML HITML 代码 混淆 在 一 起 , 缺乏 有 效 的 隔离 ， 
因此 如 果 在 大 型 项 目 或 交互 极其 复杂 的 项 目 中 , 这 种 方式 会 给 代码 的 维护 造成 极 大 的 困难 。 

现代 的 Javascript 项 目 开 发 通常 会 追求 系统 的 模块 化 ， 需 要 各 模块 之 间 进 行 合 理 地 分 
层 ， 将 一 个 事件 拆 分 为 两 个 相互 隔离 的 层 ， 即 用 户 行为 层 和 业务 逻辑 层 ， 然 后 通过 Event 
对 象 的 方法 来 将 这 两 个 层 相互 绑 定 ， 建 立 关联 ， 以 保障 代码 复 用 性 ， 同 时 提高 代码 的 维护 
性 能 。 

基于 此 原因 ，W3C 为 Event 对 象 延伸 而 来 的 EventTarget 对 象 制订 了 四 个 标准 化 的 方 
法 , 将 其 归纳 入 ECMAScript 和 DOM2 的 标准 中 。 早期 的 Web 浏览 器 对 这 四 个 标准 化 方法 
的 支持 度 并 不 高 ， 但 随 着 W3C 标准 的 发 展 和 普及 ， 现 代 的 主流 Web 浏览 器 已 经 逐渐 增强 
了 对 W3C 标准 的 支持 , 允许 通过 EventTarget 对 象 的 方法 来 为 Web 元 素 绑 定 和 移 除 事件 函 
数 ， 其 方法 如 表 6-21 所 示 。 


表 6-21 EventTarget 对 象 的 方法 


方法 作用 
attachEvent() 早期 正 浏览 器 专属 方法 (IE 8.0) ， 用 于 将 事件 句柄 绑 定 到 指定 的 函数 上 
detachEvent() 早期 正 浏览 器 专属 方法 (IE 8.0) ， 用 于 将 事件 句柄 从 指定 的 函数 上 解除 绑 定 


addEventListener() W3c 通用 方法 ， 用 于 将 事件 句柄 绑 定 到 指定 的 函数 上 
removeEventListener() ”W3c 通用 方法 ， 用 于 将 事件 句柄 从 指定 的 函数 上 解除 绑 定 
在 表 6-21 中 ，addEventListener() 方 法 和 removeEventListener() 方 法 需要 基于 W3C 的 
DOM2.0 版 本 ， 因 此 需要 更 高 版 本 的 Web 浏览 器 才能 支持 。 下 表 中 列 出 了 支持 DOM2.0 的 
最 低 版 本 Web 浏览 器 ， 如 表 6-22 所 示 。 
表 6-22 支持 DOM2.0 的 最 低 版 本 浏览 器 


Web 浏览 器 最 低 版 本 Web 浏览 器 最 低 版 本 
Internet Explorer 9 Firefox 4 
Opera 9 Safari 4 


其 中 ，addEventListener() 方 法 需要 调用 三 个 参数 来 实现 事件 的 绑 定 ， 其 使 用 方法 如 下 
所 示 。 


Target .addEventListener ( EventType ，Listener , UseCapture ) ; 


在 上 面 的 伪 代 码 中 ，Target 关键 字 表示 添加 事件 的 目标 对 象 , EventType 关键 字 表示 事 
件 的 类 型 (需要 注意 该 类 型 应 为 一 个 字符 串 ， 且 不 带 “on” 前 级 ); Listener 关键 字 表示 事 
件 监听 的 接口 或 执行 函数 ;UseCapture 关键 字 可 省 略 , 其 为 一 个 逻辑 性 数据 ,默认 值 为 false， 
表示 是 否 使 用 事件 捕捉 机 制 来 捕捉 事件 。 

例如 ， 为 一 个 Web 元 素 添加 名 为 showButtonName() 的 处 理 方法 ， 首 先 应 在 XHTML 
或 HTML 代码 中 定义 该 Web 元 素 ， 代 码 如 下 。 

<p> 

<button type="button" name="test" id="test"></button> 
</p> 
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然后 ， 在 文档 末尾 添加 脚本 标记 SCRIPT， 编 写 绑 定 事件 的 代码 ， 如 下 所 示 。 


// 定 义 全 局 对 象 
Var TestButtonApplication = { 
// 定 义 事件 的 目标 Web 元 素 
eventTarget : document.getElementBylId ( 'test' ) ， 
// 定 义 用 户 行为 ， 与 应 用 逻辑 建立 关联 
handleClick : function ( event ) { 
TestButtonApplication.showName ( event.target.name ) ; 
Fs 
// 定 义 业务 逻辑 函数 
showName : function ( etname ) { 
alert ( etname ) ; 
} 
区 
// 建 立 事件 绑 定 关系 
TestButtonApplication.eventTarget .addEventListener ( "elick" 
TestButtonApplication.handleClick , false ) ; 


在 上 面 的 代码 中 ,首先 定义 了 一 个 单 全 局 变量 TestButtonApplication， 并 将 事件 的 目标 
eventTarget、 事 件 的 用 户 行 为 层 handleClick0 以 及 业务 逻辑 层 showName0 绑 定 在 该 全 局 变 
量 上 ， 最 后 ， 调 用 事件 的 目标 建立 事件 绑 定 。 以 上 的 方式 就 是 完全 将 用 户 行为 和 业务 罗 辑 
隔离 ， 实 现 模块 化 的 事件 处 理 。 

removeEventListener() 方 法 的 使 用 方式 与 addEventListener() 类 似 , 都 需要 通过 三 个 参数 
结合 使 用 才能 移 除 已 经 绑 定 的 事件 ， 其 使 用 方法 如 下 所 示 。 


Target .removeEventListener ( EventType , Listener , UseCapture ) ; 


在 上 面 的 伪 代 码 中 ，Target 关键 字 表 示 移 除 绑 定 事件 的 目标 对 象 ， EventType 关键 字 表 
示 要 移 除 绑 定 的 事件 类 型 (需要 注意 该 类 型 应 为 一 个 字符 串 ， 且 不 带 “on” 前 级 ); Listener 
关键 字 表示 已 经 被 事件 监听 的 接口 或 执行 函数 ;UseCapture 关键 字 可 省 略 ， 其 为 一 个 逻辑 
性 数据 ， 默 认 值 为 false， 表 示 是 否 使 用 事件 捕捉 机 制 来 捕捉 事件 。 
例如 ， 对 之 前 的 绑 定 事件 的 代码 进行 改造 ， 定 义 该 事件 只 被 触发 一 次 ， 可 以 将 移 除 绑 
定 的 代码 添加 到 业务 逻辑 函数 中 ， 如 下 所 示 。 
// 定 义 全 局 对 象 
var TestButtonApplication = { 
// 定 义 事件 的 目标 Web 元素 
eventTarget : document.getElementBylId ( 'test" ) ， 
// 定 义 用 户 行为 ， 与 应 用 逻辑 建立 关联 


handleClick : function ( event ) { 


TestButtonApplication.showName ( event.target.name ) ; 
}, 
// 定 义 业务 逻辑 函数 


showName : function ( etname ) { 
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alert ( etname ) ; 

TestButtonApplication.eventTarget.removeEventListener ( "click' ， 
TestButtonApplication.handleClick ，false ) ; 

} 

于 
// 建 立 事件 绑 定 关系 
TestButtonRApplication-eventTarget.addqdEventListener ( "click' ，TestButton 
Application.handleClick ，false ) ; 


由 于 attachEvent( 方 法 和 detachEvent() 方 法 仅 被 正 8.0 支持 , 因此 在 实际 开发 中 不 推荐 
使 用 ， 在 此 不 再 獒 述 。 


6.4 小 结 


在 之 前 的 章节 中 ， 已 经 介绍 了 Javascript 脚本 语言 的 具体 语法 以 及 各 种 实体 的 用 法 ， 
但 是 如 果 需 要 使 用 Javascript 脚 本 语言 来 开发 基于 Web 的 应 用 或 站 点 ,就 必须 通过 Javascript 
脚本 语言 来 与 Web 浏览 器 结合 ， 与 Web 浏览 器 的 接口 进行 通信 ， 并 处 理 Web 文档 。 只 有 
实现 了 脚本 语言 与 浏览 器 、Web 文档 的 结合 ，Javascript 才 有 实际 意义 。 

基于 这 一 理由 和 实际 开发 的 需要 , 本 章 着 重 介绍 了 Web 浏览 器 为 开发 者 提供 的 各 种 对 
象 和 HTML 的 DOM 技术 ， 帮 助 开发 者 了 解 如 何 使 用 Javascript 实现 Web 应 用 和 站 点 的 控 
制 功 能 。 

除 此 之 外 , 本 章 还 介绍 了 Javascript 的 事件 机 制 以 及 处 理事 件 的 方法 , 列举 了 Javascript 
各 种 类 型 的 事件 及 一 些 面向 对 象 的 处 理事 件 的 方式 ， 帮 助 开 发 者 开发 出 更 加 模块 化 的 事件 
处 理 脚本 。 

在 了 解 了 本 章 内 容 之 后 , 开发 者 就 可 以 着 手 学 习 YUI 框架 的 知识 , 真正 进入 Javascript 
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随 着 Web 开发 技术 的 发 展 ， 越 来 越 多 的 开发 者 握 弃 了 原生 的 Javascript 开 
发 模式 , 采用 各 种 前 端 开发 框架 来 替代 原生 Javascript 和 HTML DOM 复杂 的 文 
档 操作 和 事件 处 理 ， 用 成 熟 的 开发 框架 来 解决 实际 开发 中 遇 到 的 各 种 问题 。 使 
用 开发 框架 ， 开 发 者 们 可 以 极 大 地 简化 原生 Javascript 和 HIML DOM 的 开发 ， 

在 之 前 的 篇 章 中 ,本 书 着 力 详细 介绍 了 XHTML.、CSS 以 及 原生 的 Javascript 
脚本 语言 ， 为 开发 者 学 习 和 使 用 YUI 框架 打 好 基础 。 在 之 后 的 章节 中 ， 本 书 就 
将 真正 地 介绍 YUI 框架 的 使 用 方式 和 技巧 , 引导 开发 者 使 用 YUI 来 处 理 和 解决 
实际 开发 中 的 各 种 问题 。 
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每 一 款 Javascript 框架 都 是 根据 特定 的 需求 来 设计 ， 用 于 解决 一 些 实际 开发 中 的 特殊 
问题 ，YUI 框架 也 不 例外 ， 它 是 一 种 集成 了 DOM 操作 、 事 件 处 理 、 异 步 数 据 交 互 以 及 大 
量 可 视 化 控件 和 兼容 性 解决 方案 的 “重量 级 ”开发 框架 。YUI 框架 主要 提供 了 三 种 功能 ， 
即 代 码 维护 管理 、 简 化 的 数据 处 理 以 及 丰富 的 控件 支持 。 这 些 功能 的 合 加 ， 使 得 YUI 框架 
成 为 目前 功能 最 为 完备 的 Javascript 开发 框架 之 一 。 

开发 者 在 学 习 了 原生 Javascript 和 HTML DOM 之 后 ， 即 可 投入 到 YUI 框架 本 身 的 功 
能 、 结 构 以 及 各 种 调用 YUI 代码 的 使 用 方法 的 学 习 中 。 本 章 就 将 首先 介绍 YUI 的 基本 知 
识 ， 以 及 在 Web 文档 中 加 载 、 使 用 YUI 框架 的 基本 方法 和 技巧 ， 为 开发 者 使 用 YUI 框架 
提供 基本 的 解决 方案 。 


7.1 认识 YUI 框架 


原生 的 Javascript 和 HTML DOM 本 身 往往 存在 这 样 那样 的 问题 , 因此 在 大 型 项 目 开发 
中 ， 选 择 一 个 好 的 第 三 方 框架 十 分 重要 。YUI 框架 是 一 个 由 雅虎 开发 的 基于 Javascript 脚 
本 语言 的 综合 性 前 端 开发 框架 ， 其 提供 了 样式 管理 、 代 码 测试 、 文 档 、 压 缩 器 等 一 系列 工 
具 ， 是 目前 综合 功能 最 强大 的 开源 框架 之 一 ， 也 是 管理 大 型 项 目 代 码 的 最 优越 的 前 端 框 架 
这 二 入 


7.1.1 YUI 框架 的 开发 背景 


早期 的 Web 项 目 往往 采用 原生 的 Javascript 脚本 语言 结合 HTML DOM 技术 来 开发 ， 
这 类 项 目的 功能 十 分 简单 ， 交 互 流程 也 并 不 复杂 ， 一 些 简单 的 Javascript 技巧 就 可 以 使 网 
站 效果 增色 不 少 。 然 而 随 着 Web 项 目的 逐渐 复杂 ， 传 统 的 原生 Javascript 和 HIML DOM 
已 经 无 法 满足 现代 Web 开发 者 的 需要 。 


1. 原生 Javascript 脚本 语言 的 问题 


原生 的 Javascript 脚本 语言 虽然 能 够 满足 开发 者 开发 Web 项 目的 各 种 基本 需求 ， 但 是 
其 并 非 最 优化 的 解决 方案 ， 主 要 存在 以 下 几 方面 问 题 。 

。 数据 处 理 模糊 

Javascript 本 身 属 于 弱 类 型 的 编程 语言 , 并 不 会 如 强 类 型 编程 语言 一 样 严 格 地 限制 和 判 
定数 据 的 类 型 ， 在 处 理 数据 的 方式 上 过 于 模糊 ， 这 一 问题 极 容易 造成 代码 的 可 读 性 低 、 维 
护 困难 等 问题 。 
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。 简化 的 面向 对 象 设计 

原生 的 Javascript 脚本 语言 也 不 支持 包 和 命名 空间 等 实体 概念 ， 开 发 者 定义 的 变量 、 
对 象 、 函 数 等 在 默认 状态 下 往往 被 直接 挂 载 到 项 级 对 象 window 上 ， 在 大 型 项 目 或 多 人 协 
作 项 目 中 ， 这 种 处 理 方式 很 容易 导致 命名 空间 的 污染 ， 产 生 各 种 各 样 的 bug。 

。 缺乏 现代 开发 技术 支持 

原生 的 Javascript 本 身 不 支持 模版 、MVC 等 现代 开发 技术 ， 在 维护 上 与 一 些 成 熟 的 开 
发 语言 有 着 较 大 的 差距 。 尤 其 在 实体 的 相互 耦合 性 方面 ，Javascript 具有 很 大 的 劣势 。 

。 不 支持 代码 编译 和 压缩 

Javascript 本 身 是 一 种 逐 行 解析 的 语言 ， 相 比 各 种 高 级 编程 语言 ， 其 采用 了 效率 较 低 的 
解析 方式 ， 不 支持 代码 编译 ， 也 不 支持 代码 压缩 ， 而 是 直接 运行 开发 者 编写 的 语句 ， 这 种 
方式 直接 影响 了 Web 浏览 器 的 代码 解析 效率 ， 导 致 执行 效率 低下 。 

以 上 几 个 方面 的 问题 直接 影响 到 了 项 目 代码 的 开发 、 执 行 和 维护 ， 使 得 Javascript 的 
学 习 难 度 更 高 ， 开 发 效率 更 低 ， 也 间接 使 Javascript 成 为 “最 难以 理解 的 语言 ”。 


2. HTML DOM 的 问题 


HTML DOM 技术 本 身 也 存在 一 些 问题 ， 由 于 其 设计 年 代 较 为 久远 ， 在 标准 和 接口 的 
设计 上 都 比较 陈旧 落后 ， 在 开发 和 使 用 上 远 远 称 不 上 便捷 成 熟 。 新 的 DOM 标准 也 许 解决 
了 一 些 问 题 , 但 是 为 了 兼容 旧 标 准 ， 同 时 迁就 旧版 本 的 Web 浏览 器 ， 在 调用 的 便捷 性 方面 
改进 并 不 大 ， 使 用 也 完全 谈 不 上 直观 ， 仍 然 缺 失 很 多 重要 的 方法 。 

以 上 这 些 问题 多 年 来 一 直 困扰 着 很 多 Web 开发 者 ， 他 们 往往 需要 编写 见长 的 Hack 代 
码 和 各 种 自行 定义 的 函数 来 解决 这 些 问 题 。 正 是 由 于 这 一 事实 的 存在 ，Javascript 脚本 语言 
才 被 称 为 最 难以 理解 的 语言 ，HIML DOM 的 维护 性 也 一 直 被 广 为 诉 病 。 

3. Javascript 框架 


一 般 而 言 ， 绝 大 多 数 中 小 型 的 Javascript 框架 往往 被 设计 用 来 解决 Javascript 和 HTML 
DOM 复杂 的 文档 操作 方法 、 事 件 处 理 以 及 异步 交互 ， 这 些 框架 往往 将 HTML DOM 的 各 
种 复杂 方法 封装 为 简单 的 几 行 代码 ， 从 而 提高 开发 者 的 开发 效率 。 典 型 的 此 类 框架 例如 
jQuery 等 。 

大 型 的 Javascript 框架 的 设计 目的 是 解决 大 型 Web 项 目的 用 户 交互 、 复 杂 的 Web 浏览 
器 兼容 性 问题 ， 以 及 管理 项 目 中 复杂 的 业务 逻辑 等 ， 参 考 现代 编程 语言 的 各 种 处 理 方式 来 
解决 复杂 Web 项 目的 代码 管理 问题 ， 提 高 代码 的 维护 性 。 


4. YUI 框架 需要 解决 的 问题 


YUI 框架 的 特点 是 博 众 家 之 长 ， 通 过 极 高 的 模块 化 和 定制 性 来 满足 不 同类 型 开发 者 的 
实际 需求 。 对 于 一 些 只 需要 开发 中 小 型 项 目的 开发 者 ，YUI 提供 了 SimpleYUI 版 本 ， 一 个 
轻 量化 的 YUI 核心 库 ， 实 现 类 似 jQuery 功能 的 简单 解决 方案 。 

对 于 一 些 需要 开发 和 维护 大 型 Web 项 目的 开发 者 , YUI 提供 了 丰富 的 官方 库 和 第 三 方 
插件 ， 帮 助 这 些 开 发 者 实现 复杂 的 交互 功能 。 除 此 之 外 ，YUI 也 提供 了 统一 的 开发 规范 ， 
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帮助 开发 者 按照 这 些 规范 来 开发 和 管理 代码 ， 便 于 进行 代码 的 维护 。 

可 以 如 此 理解 ，YUI 本 身 并 不 是 一 个 简单 的 库 ， 其 属于 一 个 高 度 定制 的 工具 箱 ， 将 各 
种 功能 强大 具有 极 强 扩展 性 的 Web 交互 控件 设计 为 具有 统一 API 的 模块 , 为 开发 者 提供 简 
明 直接 的 调用 方法 和 模块 化 的 操作 。 其 次 , YUI 部 分 引入 了 现代 面向 对 象 开 发 的 各 种 技术 ， 
例如 MVC 技术 等 ， 通 过 规范 化 的 开发 标准 ， 帮 助 开 发 者 管理 大 量 的 代码 ， 降 低 代码 维护 
的 复杂 性 。 

YUI 解决 了 前 端 开 发 三 个 方面 的 问题 , 即 简化 的 脚本 语法 (包括 原生 Javascript、 HTML 
DOM)、 脚 本 代码 的 模块 化 和 结构 化 以 及 丰富 的 控件 插件 扩展 。 

。 简化 的 脚本 语法 

YUI 对 原生 Javascript 脚本 语言 的 事件 处 理 、Ajax 数据 交互 、HTML DOM 属性 和 方法 
等 复杂 的 语法 、 用 法 进行 了 封装 处 理 ， 为 开发 者 提供 了 一 种 极其 便捷 高 效 的 全 新 语法 和 调 
用 方式 ， 帮 助 开 发 者 用 最 简洁 的 代码 来 实现 丰富 的 程序 功能 。 

同时 ，YUI 还 简化 了 开发 者 操作 CSS 样式 表 的 方式 , 提供 一 些 便捷 的 接口 来 帮助 开发 
者 修改 Web 元 素 的 样式 ， 快 速 实现 样式 的 动画 功能 。 

。 脚本 代码 的 模块 化 和 结构 化 

YUI 通过 对 原生 的 Javascript 脚本 语言 的 改进 ， 通 过 沙 箱 机 制 和 一 系列 自 定义 的 方法 ， 
对 Javascript 进行 深度 地 改写 ， 增 加 了 定义 类 、 命 名 空间 、 包 等 实体 的 便捷 方式 ， 同 时 ， 
YUI 支持 以 模块 化 的 方式 加 载 各 种 功能 插件 ， 具 备 极 强 的 扩展 性 。 

在 结构 化 方面 ，YUI 对 代码 的 结构 和 接口 进行 了 严格 规范 ， 强 制 开 发 者 以 规范 的 方法 
编写 代码 ， 从 而 实现 多 开发 者 协作 以 及 便捷 地 维护 等 性 能 。 

。 丰富 的 控件 插件 扩展 

YUI 的 官方 编写 了 大 量 实用 的 控件 ， 并 对 这 些 控件 提供 了 统一 而 简洁 的 调用 方式 ， 降 
低 开发 者 的 开发 成 本 ,提高 开发 效率 。 同 时 ,还 提供 Yextend0 等 方法 来 帮助 开发 者 快速 创 
建 扩展 插件 ， 让 开发 者 编写 出 符合 自身 需求 的 强大 扩展 。 

5. YUI 的 支持 环境 


YUI 框架 是 一 种 基于 Web 浏览 器 的 脚本 开发 框架 ， 其 本 身 依赖 Web 浏览 器 的 文档 排 
版 引擎 和 脚本 解析 引擎 运行 。 目 前 最 新 版 本 的 YUI 框架 支持 性 较 强 , 可 以 在 以 下 平台 运行 ， 
如 表 7-1 所 示 。 


表 7-1 YUI 框 架 的 支持 平台 


平台 版 本 

TInternet Explorer “6.0、7.0、8.0、9.0、10.0、11.0 

Chrome 最 新 版 本 

Firefox 最 新 版 本 

Safari IOS 5x, IOS 6x、IOS 7x、5x(Windows)、6.x(OSX 10.8)、 7.x(OSX 10.9)、 
Android 2.3x、3.Xx、 4.X 


Windows APP Windows 8、Windows 8.1 


目前 ，YUI 框架 支持 以 上 所 有 的 平台 ， 也 就 是 说 ， 在 这 些 环境 下 ， 开 发 者 可 以 放心 地 
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使 用 YUI 框架 来 解决 开发 中 的 问题 。 
7.1.2 YUI 框架 整体 剖析 
YUI 框架 是 一 种 模块 化 的 前 端 脚本 开发 框架 ， 其 完整 框架 包含 诸多 模块 ， 这 些 模块 都 
可 以 通过 指定 的 YUI 全 局 对 象 来 加 载 和 调用 。YUI 框架 可 以 分 为 基础 、 核 心 、 组 件 框架 和 
组 件 四 大 类 ， 如 图 7-1 所 示 。 


组 件 


Event Drag and Drop Animation 


We Bese 一 DD Manager 
OCC odeLisi DDM Shim 
DOM 
DOM Base 


Wod DD Drop 
DOM Style 
一 


DD Plugin 
DD Drop 
Plugin 


图 7-1 YUI 框 架 的 分 类 、 包 和 模块 


1. 基础 分 类 


基础 分 类 是 YUI 框架 中 最 重要 的 分 类 ， 也 是 整个 YUI 框架 代码 执行 的 基础 ， 又 被 称 
作 YUI 的 种 源 。 该 分 类 决定 了 YUI 框架 如 何 来 管理 整个 项 目的 代码 、 加 载 其 他 模块 以 及 
引导 其 他 模块 代码 的 执行 。YUI 框架 中 最 常用 的 use() 方 法 就 属于 该 分 类 下 的 YUI 包 。 

基础 分 类 下 只 包含 YUI 的 顶层 包 , 其 主要 包含 三 个 模块 , 即 YUI Base、Get 以 及 Loader 
等 ， 其 作用 如 下 所 示 。 

。 YUI Base 模块 

早期 的 YUI 3 框架 支持 一 个 简化 的 YUI 副本 ， 名 为 SimpleYUI。 该 副本 提供 了 
YUI 框架 最 基本 的 方法 。 最 新 的 YUI 框架 已 经 移 除 了 这 一 副本 ， 以 YUI Base 子 模块 取 而 
人 之 5 

YUI Base 模块 提供 最 小 化 的 YUI 框架 全 局 对 象 和 核心 方法 ， 为 YUI 框架 提供 通用 的 
依赖 项 目 支持 。 

。 Get 模块 

Get 模块 提供 动态 加 载 Javascript 和 CSS 资源 的 一 般 通 用 机 制 ， 为 Web 文档 加 载 普通 
的 Web 资源 。 
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e Loader 模块 
Loader 模块 提供 加 载 YUI 其 他 组 件 的 机 制 ， 即 动态 地 在 页 面 中 插入 YUI 内 部 的 各 种 
组 件 ， 在 避免 组 件 重复 加 载 的 前 提 下 快速 地 提高 组 件 加载 效 率 。 


2. 核心 分 类 


核心 分 类 是 基于 语言 级 别 的 模块 , 其 作用 是 为 YUI 的 所 有 下 游 组 件 提供 一 个 通用 的 依 
赖 层 ， 辅 助 YUI Loader 来 加 载 和 运算 实际 的 核心 依赖 。 核 心 分 类 将 对 Web 前 端 脚本 开发 
中 所 面 对 的 各 种 对 象 进行 封装 ， 其 包含 四 个 包 ， 如 下 所 示 。 

。 Event 包 

提供 DOM 事件 和 自 定义 事件 的 标准 处 理 方法 ， 通 过 事件 的 “触发 一 接收 一 处 理 一 反 
馈 ” 这 一 完整 流程 ， 以 YUI 框架 的 规范 来 管理 事件 。 

。 DOM 包 

顾名思义 ， 该 包 以 YUI 框架 封装 后 的 对 象 、 方 法 和 属性 来 管理 和 操作 DOM 元 素 。 其 
又 包含 四 个 模块 ， 即 DOM Base 提 供 标准 化 的 DOM 方法 和 辅助 方法 )、DOM Style 〈 提 
供 底 层 的 样式 管理 方法 )、DOM Screen (提供 底 层 的 定位 和 区 块 管理 方法 )、Selector (在 
底层 以 标准 化 的 方式 选择 和 筛选 DOM 元 素 )。 

。 Node 包 

该 包 以 YUI 框架 封装 后 的 对 象 、 方 法 和 属性 来 管理 和 操作 DOM 节点 ， 其 同样 包括 四 
个 模块 ， 即 Node Base (为 创建 操作 DOM 节点 提供 抽象 方法 ， 并 通过 插件 对 DOM 节点 进 
行 扩展 )、NodeList (处 理 阁 干 DOM 节点 的 集合 , 简化 HIML DOM 的 NodeList 节点 对 象 ， 
扩展 批量 处 理 这些 节 点 集合 的 属性 和 方法 )、Node Style (为 操作 DOM 节点 和 DOM 节点 
集合 的 样式 提供 扩展 接口 ) 以 及 Node Screen (为 DOM 节点 提供 定位 和 区 块 管理 方法 )。 

。 OOP 包 

以 YUI 框架 来 封装 和 处 理 Javascript 对 象 , 对 Javascript 对 象 进行 扩展 以 及 底层 操作 支 
持 。 其 内 建 OOP Base 模块 来 实现 这 些 功 能 。 


3. 组 件 框架 


组 件 框 架 的 作用 是 为 开发 者 在 创建 底层 元 件 和 高 级 UI 控件 时 提供 一 个 一 致 性 和 可 重 
用 的 结构 , 辅助 开发 者 开发 出 基于 YUI 框架 的 各 种 插件 , 其 包含 以 下 四 个 模块 , 如 下 所 示 。 

。 Base 模块 

为 所 有 YUI 组 件 提供 基本 的 属性 管理 和 事件 机 制 的 基 类 ， 所 有 YUI 框架 的 组 件 和 自 
定义 组 件 、 第 三 方 组 件 都 依赖 于 此 基 类 。 

。 Attribute 模块 

提供 属性 管理 系统 , 其 可 以 扩展 任何 类 , 包括 提供 getset 接口 和 内 部 的 change 事件 等 。 

。 Widget 模块 

为 高 级 UI 组 件 提供 基础 的 支持 ， 包 括 生 命 周 期 管理 等 。Widget 模块 依赖 于 Base 和 
Attribute 模块 。 

。 Plugin 模块 

插件 命名 空间 ， 其 提供 了 一 个 插件 模板 ， 让 插件 直接 并 入 YUI 的 命名 空间 下 ,与 YUI 
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框架 更 加 紧密 地 结合 ， 同 时 使 插件 能 直接 在 节点 上 操作 。 
4. 组 件 


组 件 是 YUI 框架 扩展 和 增强 功能 的 部 分 。YUI 3 是 一 种 高 度 模块 化 的 框架 ， 其 提供 了 
一 种 类 似 点 菜 的 机 制 ， 可 以 最 大 限度 为 开发 者 提供 性 能 最 优化 的 自 带 组 件 和 各 种 复杂 的 交 
互 功能 扩展 。YUI 提供 了 多 种 包 和 模块 来 实现 包括 拖 放 、 动 画 、Ajax 交互 、Cookie 管理 、 
JSON 数据 处 理 、 图 形 处 理 等 功能 ， 在 此 不 再 效 述 。 


7.2 加载 YUI 框架 


在 了 解 YUI 框架 的 开发 背景 和 整体 结构 后 ， 开 发 者 可 以 着 手 通过 各 种 方式 获取 YUI 
框架 的 源 代码 , 并 通过 基础 的 YUI 框架 加 载 YUI 的 增强 扩展 模块 , 真正 地 调用 和 使 用 YUI 


7.2.1 获取 YUI 框架 


YUI 框架 是 一 款 免费 使 用 的 开源 框架 , 任何 开发 者 都 可 以 通过 YUI 框架 的 官方 网 站 获 
取 最 新 版 本 的 YUI 框架 ， 通 过 在 线 的 方式 为 Web 文档 嵌入 YUI 框架 的 代码 。 如 果 开 发 者 
需要 在 无 互联 网 的 环境 下 使 用 YUI 框架 ， 也 可 以 通过 github 的 YUI 项 目 页 将 YUI 框架 的 
完整 代码 、 示 例 、 说 明文 档 和 API 文档 下 载 到 本 地 计算 机 中 ， 根 据 实 际 情况 调用 。 


1. 从 CDN 服务 器 加 载 YUI 框架 


通常 情况 下 ， 中 小 型 Web 服务 器 会 被 架设 在 某 一 个 地 域 的 通信 运营 商 的 机 房 中 ， 接 入 
地 区 性 运营 商 的 网 络 ， 这 种 接 入 方式 导致 仅 有 在 同一 运营 商 网 络 中 的 终端 用 户 访问 该 服务 
器 才能 有 较 好 的 速度 和 体验 。 由 于 运营 商 以 及 地 域 之 间 往 往 存在 网 间 壁 垒 ， 因 此 如 果 终 端 
用 户 来 自 不 同 的 地 域 ， 或 不 同 的 运营 商 服务 网 络 ， 则 访问 Web 服务 器 时 往往 效率 较 低 。 

CDN 技术 的 原理 就 是 在 广泛 的 地 域 和 运营 商 网 络 内 建立 大 量 同 步 服务 器 , 以 自动 分 发 
的 方式 同步 Web 服务 器 中 的 数据 ， 然 后 再 通过 对 终端 用 户 来 源 的 判定 ， 决 定 由 哪 一 台 服 务 
器 就 近 为 终端 用 户 提 供 服务 。 这 一 方式 可 以 极 大 地 提升 用 户 访问 数据 的 效率 和 体验 。 

通常 情况 下 , 大 型 企业 的 网 站 或 Web 服务 都 会 采用 这 一 技术 , 以 提高 用 户 访问 的 体验 。 
作为 跨国 性 的 网 络 服务 商 ， 雅 虎 也 使 用 了 CDN 服务 器 技术 ， 并 为 YUI 框架 官方 网 站 建立 
了 全 球 的 CDN 网 络 。 

因此 ， 如 果 开 发 者 建立 的 是 基于 互联 网 的 Web 站 点 或 服务 ， 则 在 此 强烈 推荐 通过 雅虎 
官方 的 CDN 服务 器 来 远 端 加载 YUI 框架 代码 ， 以 降低 自身 服务 器 的 负载 ， 同 时 提高 终端 
用 户 加 载 页 面 的 效率 。 以 目前 最 新 版 本 的 YUI 3.15.0 框架 为 例 ， 其 从 CDN 服务 器 调用 的 
方式 如 下 。 


<script type="text/javascript" src="http://yui.yahooapis.com/3.15.0/build/ 
zyui/yui-min.js"></script> 
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将 以 上 代码 放置 在 Web 文档 的 文档 主体 元 素 BODY 末尾 ， 即 可 将 该 版 本 的 YUI 框架 
加 载 到 当前 Web 页 中 。 

与 其 他 开源 软件 类 似 ，YUI 框架 也 分 为 很 多 版 本 ,例如 3.5.0、3.6.0 等 。 如 果 开 发 者 
需要 使 用 这 些 较 旧版 本 的 YUI 框架 代码 ， 也 可 以 将 脚本 标记 SCRIPT 的 src 属性 中 的 版 本 
号 修改 为 这 些 较 旧 的 版 本 ， 即 可 调用 旧版 本 的 YUI 框架 。 例 如 ， 调 用 YUI 3.5.0 版 本 的 框 
架 ， 代 码 如 下 。 

<script type="text/javascript" src="http://yui.yahooapis.com/3.5.0/build/ 

yui/yui-min.js"></script> 

将 此 段 代码 添加 到 Web 文档 的 文档 主体 元 素 BODY 末尾 ， 即 可 将 该 版 本 的 YUI 加 载 
到 当前 的 页 面 中 。 

2. 调用 本 地 YUI 框架 

除了 从 CDN 服务 器 加 载 以 外 ， 开 发 者 也 可 将 YUI 框架 的 完整 代码 、 官 方 帮助 、API 
说 明 以 及 测试 样 例 等 下 载 到 本 地 计算 机 ， 再 上 传 到 Web 服务 器 ， 使 用 本 地 的 副本 。 以 目前 
最 新 版 本 的 YUI 3.15.0 框架 为 例 ， 开 发 者 可 以 通过 YUI 框架 项 目的 GitHub 站 点 
(https://github.com/yui/yui3/releases) 获取 完整 的 YUI 框架 内 容 ， 如 图 7-2 所 示 。 


GitHub msrpowrey - sewcnorwpescommand © Explore Features Enterprise Blog | son | Signin 
yui/ yui3 三 Star 2481 PFork 766 
Releases / Tags ‘> 
© 

3.15.0 n 
ul tiptych roloasod this 24 days ago . 54 commits to master since this release 有 


YY 。Release Announcement - http:/www.yuiblog.com/blog/2014/02/26/yui-3-15-0-released/ 


。Change History Rollup: https://github.com/yui/yui3/wiki/YUI-3.15.0-Change-History-Rollup 
。 Seed: http:/yui.yahooapis.com/3.15.0/build/yuilyui-min.je 区 
。GitHub: git checkout \3.15.8 


Release Build (download this for local deployments) 


加 Release (zip) 


四 Source code (zip) 四 Source code (tar.gz) 


图 7-2 YUI 框架 项 目的 GitHub 站 点 


在 该 GitHub 站 点 中 ， 默 认 以 从 上 到 下 和 版 本 从 高 到 低 的 方式 显示 YUI 框架 的 各 版 本 
的 发 布 状 况 。 以 目前 最 新 版 本 YUI 3.15.0 为 例 ， 其 提供 了 三 种 版 本 。 

其 中 ,【Release(zip)】 按 钮 链接 的 是 以 ZIP 格式 打包 的 YUI 发 行 版 代码 ， 其 除了 包含 
完整 的 YUI 框架 代码 外 ， 还 包含 了 说 明 、 手 册 、 接 口 说 明 书 等 内 容 ， 适 合 开发 者 下 载 到 本 
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地 学 习 和 研究 使 用 。 

【Source code(zip)】 按 钮 链接 的 是 以 ZIP 格式 打包 的 YUI 源 代码 ， 其 仅仅 包含 YUI 的 
基本 源 代码 和 开发 YUI 的 原始 数据 ， 适 合 熟 练 开 发 者 使 用 ， 直 接 加 载 到 Web 项 目 或 Web 
应 用 中 。 

【Source code(tar gz)】 按 钮 链接 的 是 以 TAR 格式 打包 的 YUI 源 代码 ， 其 内 容 与 Source 
code(zip) 按 钮 链接 的 内 容 相同 ， 区 别 是 打包 格式 不 一 样 。 

为 了 学 习 和 研究 YUI 框架 ， 本 书 在 此 推荐 开发 者 下 载 完整 的 YUI 发 行 版 ， 其 包含 五 
个 文件 夹 和 两 个 Mark Down 标记 文件 ， 其 作用 如 表 7-2 所 示 。 

表 7-2 YUI 框架 的 目录 结构 


类 型 ”名称 作用 

日 录 。 api HTML 格式 的 YUI 框架 API 接口 说 明 书 

目录 。 build YUI 框架 的 源 代码 , 其 包含 核心 YUI 以 及 各 种 插件 的 原版 和 压缩 编译 版 以 及 
DEBUG 版 等 

目录 。 docs HTML 格式 的 YUI 框架 说 明文 档 

日 录 。 releasenotes Mark Down 标记 文件 格式 的 更 新 日 志 

目录 。 tests HTML 格式 的 测试 样 例 


文件 。 LICENSE.md ”YUI 框 架 的 许可 协议 
文件 README.md ”YUI 框 架 的 说 明文 档 


以 上 的 目录 中 ，api 目录 、docs 目录 以 及 tests 目录 都 是 用 来 为 用 户 提供 YUI 框架 的 学 
习 资 料 和 相关 文档 ，YUI 框架 的 代码 都 放置 在 build 目录 下 ， 按 照 代码 项 目 或 插件 的 名 称 
分 为 若干 子 目录 。 

在 实际 开发 中 , 开发 者 可 以 从 build 目录 下 根据 需要 选择 所 有 子 目 录 , 将 其 上 传 至 Web 
服务 器 的 脚本 目录 中 进行 加 载 ， 再 通过 相对 路 径 调用 ， 代 码 如 下 。 


<script type="text/javascript" src="/Scripts/yui/yui-min.js"></script> 


如 果 开 发 者 的 Web 站 点 是 基于 局 域 网 , 或 站 点 的 用 户 访问 互联 网 有 所 限制 则 开发 者 
有 必要 使 用 本 地 YUI 框架 副本 来 为 用 户 提供 服务 ， 通 过 本 地 YUI 框架 副本 提升 用 户 访问 
体验 。 


7.2.2 加载 包 和 模块 


传统 的 Javascript 脚本 语言 通常 以 HTML 的 脚本 标记 SCRIPT 来 加 载 各 种 脚本 文件 ， 
这 种 方式 的 缺点 在 于 管理 混乱 ， 极 度 依赖 开发 者 自身 来 管理 加 载 的 脚本 和 资源 。 在 YUI 框 
架 中 ， 提 供 了 多 种 Javascript 加 载 包 和 模块 的 方式 ， 通 过 YUI 框架 自身 的 加 载 机 制 来 处 理 
这 些 问 题 。 

YUI 框架 提供 了 一 个 基于 YUI 单 全 局 变量 的 use( 方 法 ， 帮 助 开 发 者 快速 加 载 YUI 框 
架 的 包 和 模块 ， 其 使 用 方式 如 下 所 示 。 


YUI ( Config ) .use ( "Entity1" ， 
"Entity2" ， 
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’ 
function (YY) { 
Sentences ; 


}) 5; 


在 上 面 的 伪 代 码 中 ，YUI 关键 字 为 YUI 框架 预 置 的 全 局 单 变量 , 不 可 修改 ; Config 关 
键 字 表示 一 个 config 类 的 对 象 实例 ,该 对 象 实例 用 于 修改 YUI 框架 的 全 局 配置 ， 允 许 开发 
者 自行 对 YUI 框架 进行 订 制 ， 如 果 不 需要 修改 YUI 全 局 配置 ， 可 以 留 空 ， Entity1、Entity2 
等 关键 字 表 示 实 体 ， 其 可 以 是 YUI 的 包 或 模块 的 名 称 ; Y 表示 开发 者 请 求 的 YUIAPI， 理 
论 上 开发 者 可 以 将 其 更 改 为 其 他 名 称 ， 但 一 些 特定 的 YUI 模块 可 能 只 允许 使 用 这 一 名 称 ， 
通常 情况 下 建议 不 要 修改 ; Sentences 关键 字 表示 加 载 YUI 框架 之 后 执行 的 语句 。 

在 YUI 框 架 下 ， 当 开发 者 第 一 次 调用 YUIO 单 全 局 变量 时 ， 就 是 创建 了 一 个 新 的 YUI 
实例 ， 该 实例 是 一 个 用 来 组 装 整个 项 目的 宿主 。YUI 框架 与 其 他 框架 (如 jQuery 之 类 ) 的 
区 别 在 于 , YUI 实例 是 一 个 空 的 架子 , 其 本 身 并 不 提供 类 似 jQuery 之 类 框架 的 属性 和 方法 ， 
也 不 能 用 来 直接 进行 DOM 操作 或 Ajax 操作 。 

开发 者 必须 通过 use() 方 法 来 实时 加 载 YUI 框架 的 其 他 各 种 包 和 模块 ， 以 及 开发 者 自 
行 编写 的 YUI 第 三 方 插件 和 控件 ， 通 过 调用 的 包 、 模 块 、 插 件 和 控件 来 解决 各 种 实际 的 问 
题 。 这 种 机 制 的 优势 在 于 开发 者 可 以 更 加 灵活 地 解决 问题 ， 而 无 需 在 未 进行 任何 操作 时 就 
加 载 大 量 的 脚本 ， 从 一 定 程度 上 降低 了 系统 资源 的 消耗 。 

简单 地 说 ，use0 方 法 将 以 以 下 方式 来 运作 。 

(1) 根据 开发 者 定义 的 包 、 模 块 、 插 件 和 控件 决定 需要 获取 哪些 资源 ， 建 立 一 个 依赖 
资源 的 列表 ， 并 将 已 经 加 载 的 包 、 模 块 、 插 件 和 控件 从 列表 中 筛选 掉 。 

(2) 在 解决 了 依赖 资源 的 列表 问题 后 ，use() 方 法 将 构造 一 个 合并 加 载 的 地 址 ， 此 时 ， 
YUI 的 Loader 模块 会 通过 HTTP 请 求 从 CDN 服务 器 或 本 地 服务 器 获取 所 有 缺失 的 模块 。 
需要 注意 的 是 ， 此 操作 为 异步 操作 ， 其 本 身 不 会 阻塞 Web 浏览 器 的 UI 线程 。 

(3) 当 use() 方 法 加 载 完成 模块 后 ， 其 会 将 开发 者 请 求 的 整个 API 应 用 到 YUI 的 实例 
对 象 上 。 

(4) 最 后 ，use( 方 法 将 执行 回调 函数 ， 并 把 YUI 实例 作为 Y 参数 。 在 回调 函数 里 ，Y 
参数 是 一 个 私有 的 指向 回调 函数 内 部 代码 的 YUI 库 的 实例 。 

也 就 是 说 ， 在 开发 者 获取 YUI 框架 后 ，YUI 的 实例 本 身 仅仅 包含 一 个 yui-min.js 文件 
中 的 代码 ， 随 着 开发 者 不 断 使 用 use() 方 法 来 加 载 各 种 包 、 模 块 、 插 件 和 控件 ， 逐 渐 根 据 需 
求 来 扩展 。 

use() 方 法 的 回调 函数 通常 被 称 作 “YUI 沙 箱 ” 其 会 将 开发 者 编写 的 所 有 代码 添加 到 
一 个 私有 的 作用 域 ， 保 护 这 些 代码 不 被 Web 文档 中 其 他 的 脚本 破坏 或 重 构 ， 避 免 命 名 空间 
污染 。 这 点 在 实际 开发 中 十 分 重要 ， 很 多 项 目 协作 中 出 现 的 这 样 那样 的 问题 实际 上 都 是 由 
这 一 原因 导致 的 。 

在 实际 开发 中 ,开发 者 可 以 在 一 个 Web 文档 中 调用 多 个 应 用 程序 ， 甚 至 创建 多 个 独立 
的 沙 箱 ， 一 旦 某 一 个 沙 箱 加 载 了 一 个 YUI 的 包 、 模 块 、 插 件 和 控件 ， 则 其 他 沙 箱 不 需要 再 
次 进行 加 载 就 可 以 直接 调用 。 

YUI 框架 的 沙 箱 机 制 也 存在 一 个 问题 ， 就 是 代码 重用 度 的 降低 ， 由 于 沙 箱 内 部 的 代码 
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是 无 法 被 外 部 访问 的 , 因此 无 法 被 其 他 代码 重用 。 开 发 者 如 果 需 要 编写 可 重用 的 代码 部 分 ， 
只 能 通过 YUI 顶层 对 象 提供 的 add0 方 法 来 实现 。 当 然 ， 在 避免 命名 空间 污染 这 一 大 优势 
下 ， 这 点 劣势 基本 微不足道 。 

在 下 面 的 代码 中 ， 就 将 使 用 use0 方 法 加 载 节点 操作 包 Node， 然 后 通过 Node 包 下 的 
one 方法 获取 XHTML 节点 ， 然 后 再 使 用 setHTML 方法 设置 节点 的 内 容 。 


<p id="test"></p> 
<script type="text/javascript" src="/Scripts/yui/yui-min.js"></script> 
<script type="text/javascript"> 
YUI ( ).use ( 'node' ， 

Eunction (了 ) { 

Y.one ( '#test' ) .setHTML ( “测试 文本 ' ) ; 

旺旺 
</script> 


执行 以 上 代码 后 ，YUI 框架 就 会 为 id 属性 值 为 test 的 段落 标记 P 添加 “测试 文本 ”的 
字符 内 容 。 


7.3 自 定 义 YUI 模 块 


YUI 框 架 具 有 很 强 的 扩展 性 ， 除 了 由 官方 开发 的 各 种 组 件 和 控件 外 ， 开 发 者 也 可 以 使 
用 第 三 方 开发 的 组 件 和 控件 自行 编写 YUI 模块 ， 以 符合 YUI 标准 的 规范 来 拓展 YUI 的 功 
能 。 这 些 代码 将 是 真正 可 以 重用 的 模块 ， 也 就 是 说 ， 如 果 开 发 者 希望 开发 出 可 以 重用 的 代 
码 ， 则 必须 通过 这 种 方式 来 实现 。 


7.3.1 创建 自 定义 YUI 模块 


在 创建 自 定义 YUI 模块 时 ， 需 要 使 用 到 YUI 框架 顶层 的 add0 方 法 ， 其 使 用 方式 如 下 
所 示 。 
YUI ( Configl ).add ( Name ， 
function (了 ) { 
Sentences ; 
} ， 
Version ， 
Config2 )》 > 


在 上 面 的 伪 代 码 中 ，YUI 关键 字 为 YUI 框架 预 置 的 全 局 单 变量 ， 不 可 修改 ; Configl 
关键 字 表示 一 个 config 类 的 对 象 实例 ， 该 对 象 允许 开发 者 自行 对 YUI 框架 进行 订 制 ， 如 果 
不 需要 修改 YUI 全 局 配置 ， 可 以 留 空 ， Name 关键 字 表示 自 定义 YUI 模块 的 名 称 ， 其 必须 
为 全 小 写字 母 ， 若 干 单词 间 应 以 连 字符 “-” 连 接 ; Y 表示 开发 者 请 求 的 YUIAPI， 理 论 上 
开发 者 可 以 将 其 更 改 为 其 他 名 称 ， 但 一 些 特定 的 YUI 模块 可 能 只 允许 使 用 这 一 名 称 ， 通 常 
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情况 下 建议 不 要 修改 ; Sentences 关键 字 表 示 加 载 YUI 框架 之 后 执行 的 语句 ;，Version 关键 
字 表 示 自 定义 YUI 模块 的 版 本 号 ， 其 可 以 被 省 略 ; Config2 关键 字 同 样 为 一 个 config 类 的 
对 象 实例 ， 其 定义 了 自 定义 YUI 模块 的 依赖 、 配 置 以 及 自动 加 载 等 信息 ， 其 同样 可 以 被 
省 略 。 

一 旦 执行 了 add0 方 法 ， 则 开发 者 可 以 像 调用 其 他 官方 YUI 模块 一 样 使 用 自 定 义 模块 
中 的 代码 ， 通 过 use() 方 法 来 加 载 ， 并 通过 回调 函数 来 调用 。 

例如 ， 通 过 YUI 框架 创建 一 个 Hello World 程序 ， 输 出 Hello World 信息 ， 即 可 首先 创 
建 一 个 名 为 “hello-world” 的 模块 ， 然 后 再 通过 use 方法 调用 ， 代 码 如 下 。 


<script type="text/javascript" src="/Scripts/yui/yui-min.js"></script> 
<script type="text/javascript"> 
YUI ( ) .add ( 'hello-world' ， 
function (了 ) { 
Y.namespace ( 'HW' ) ; 
Y.HW.sayHello = function ( ) { 
alert ( 'Hello ，World!' ) ; 
}; 
}, 
OE 
YUI ( ) .use ( 'hello-world' , function (了 ) { 
Y.HW.sayHello ( ) 
Fi 
</script> 


在 上 面 的 代码 中 ， 自 定义 了 一 个 名 为 “hello-world” 的 模块 ， 并 在 该 模块 的 回调 函数 
内 定义 了 一 个 名 为 “HW” 的 命名 空间 ， 以 防止 命名 空间 的 污染 。 最 后 ， 设 置 模块 的 版 本 
号 为 0.1， 并 通过 use() 方 法 来 调用 了 这 一 方法 ， 输 出 了 “Hello World” 的 信息 。 

YUI 框架 的 特点 就 是 将 模块 的 定义 和 执行 完全 和 剥离 ,add() 方 法 使 用 YUI 全 局 对 象 来 注 
册 模 块 ， 而 use0 方 法 则 把 模块 附加 到 立 实例 上 ， 通 过 指定 的 命名 空间 调用 。 


7.3.2 自 定义 模块 的 依赖 


除了 一 些 特殊 的 自 定义 YUI 模块 以 外 ， 多 数 自 定义 YUI 模块 都 很 可 能 需要 依赖 其 他 
的 YUI 模块 ， 调 用 其 他 模块 的 代码 等 ， 此 时 ， 就 需要 在 定义 这 些 模块 时 使 用 add0 方 法 的 
第 四 个 参数 ， 定 义 一 个 特殊 的 config 实例 ， 以 建立 这 种 依赖 关系 。 该 config 实例 实际 上 是 
一 个 对 象 ， 其 可 以 包含 三 个 属性 ， 如 表 7-3 所 示 。 


表 7-3 add0 方 法 的 config 实例 参数 结构 


属性 值 类 型 作用 
requires Array -个 数组 ， 其 包含 了 若干 自 定义 YUI 模块 依赖 的 其 他 模块 
optional 。 Array -个 数组 ， 定 义 了 自 定 义 YUI 模块 的 配置 信息 ， 其 依赖 于 全 局 配置 


Use Array 旧版 本 YUI 所 使 用 的 物理 上 的 包 的 集合 ， 不 推荐 使 用 
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例如 , 在 之 前 的 Hello World 程序 中 , 是 通过 javascript 的 window 对 象 来 输出 的 “Hello 
World” 信 息 ; 如 果 需 要 将 其 输出 到 某 个 具体 的 DOM 元 素 内 部 ， 则 该 自 定 义 模块 就 必须 依 
赖 YUI 框 架 的 Node 包 ， 此 时 就 需要 开发 者 配置 依赖 关系 ， 代 码 如 下 。 


<p id="test"></p> 
<script type="text/javascript" src="/Scripts/yui/yui-min.js"></script> 
<script type="text/javascript"> 
YUI ( ).add ( 'hello-world' ， 
function (了 ) { 
function setNodeText ( node ，html ) { 
node = Y.one ( node ) : 
if ( node ) { 
node .setHTML ( html ) ; 
} 
} 
Y.namespace ( 'HW' ) ; 
Y.HW.sayHello = function ( node ) { 
setNodeText ( node , 'Hello ，World!' ) ; 
}; 
}, 
SD 
{ requires : [ 'node-base' ] } ); 
YUI ( ) .use ( 'hello-world' , function (了 ) { 
Y.HW.sayHello ( Y.one ( '#test' ) ) ; 
Ds 
</script> 


在 上 面 的 代码 中 ， 在 add0 方 法 内 部 的 回调 函数 中 首先 定义 了 一 个 名 为 setNodeText() 
的 方法 ， 执 行 具体 的 业务 逻辑 ， 然 后 再 定义 名 为 “HW” 的 命名 空间 ， 调 用 该 业务 逻辑 输 
出 信息 ， 由 于 setNodeText( 方 法 调用 了 Node 包 中 的 Node Base 模块 ， 因 此 需要 通过 config 
类 的 requires 属性 建立 依赖 关系 。 最 后 ， 通 过 use0 方 法 直接 调用 “HW” 命 名 空间 的 
sayHello0) 方 法 ， 实 现 输 出 信息 。 

在 建立 模块 之 间 的 依赖 关系 时 尤其 需要 注意 的 是 一 定 不 能 建立 循环 依赖 , 否则 YUI 框 
架 的 代码 将 无 法 正确 地 执行 。 


7.3.3 ”加 载 外 部 自 定义 YUI 模块 


在 实际 的 YUI 框架 开发 中 ， 很 少 有 开发 者 将 代码 都 编写 在 一 个 HTML 文档 中 ， 尤 
其 当 一 个 项 目 需要 大 量 HTML 文档 时 。 可 重用 的 自 定 义 模块 通常 必须 放置 在 指定 的 
Javascript 脚本 文件 中 。 

因此 ， 像 之 前 小 节 实 例 中 建立 的 自 定义 YUI 模块 实际 上 并 不 能 真正 地 具备 可 重用 性 。 
如 果 开 发 者 需要 这 部 分 代码 重用 ， 必 须 将 其 编写 在 独立 的 Javascript 脚本 文件 中 ， 再 通过 
YUI 配置 文件 来 将 其 加 载 ， 这 样 ， 才 能 真正 做 到 代码 可 重用 化 。 
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传统 的 Javascript 解决 以 上 问题 的 方式 就 是 将 自 定义 YUI 模块 的 方式 存储 到 外 部 的 
Javascript 脚本 文件 中 ， 然 后 再 通过 HTML 的 脚本 标记 SCRIPT 将 其 载 入 到 Web 文档 中 。 

例如 ， 对 之 前 的 带 有 依赖 的 Hello World 程序 进行 修改 ， 将 add0 方 法 所 执行 的 业务 逻 
辑 作 为 模型 层 的 内 容 ， 代 码 放置 在 一 个 名 为 hello-worldjs 的 文件 中 ， 代 码 如 下 。 


YUI ( ) .add ( 'hello-world' ， 
function (站 ) { 
function setNodeText ( node ，html ) { 
node = Y.one ( node ) : 
if ( node ) { 
node .setHTML ( html ) ; 


} 
} 
Y.namespace ( 'HW' ) ; 
Y.HW.sayHello = function ( node ) { 
setNodeText ( node , 'Hello ，World!' ) ; 
}; 
}, 
1 


{ requires : [ 'node-base' ] } ); 


以 上 代码 为 自 定义 的 hello-world 模块 ， 将 其 存放 到 /Scripts/modules/ 目 录 下 的 
hello-worldjs 中 之 后 ， 即 可 通过 传统 的 方式 将 其 加 载 到 Web 文档 中 ， 修 改 结果 如 下 。 


<p id="test"></p> 
<script type="text/javascript" src="/Scripts/yui/yui-min.js"></script> 
<script type="text/javascript" 
src="/Scripts/modules/hello-world.js"></script> 
<script type="text/javascript"> 
YUI ( ) .use ( 'hello-world' , function (了 Y) { 
Y.HW.sayHello ( Y.one ( '#test' ) ) ; 
1); 


</script> 


这 种 方式 虽然 比较 简单 ， 但 是 其 缺点 是 必须 为 每 一 个 Web 文档 编写 一 大 堆 脚本 标记 
SCRIPT， 如 果 需 要 ， 删 除 或 新 增 某 一 个 脚本 文件 ， 则 需要 开发 者 对 每 一 个 Web 文档 进行 
修改 ， 费 时 费力 ， 效 力 比 较 低 。 

YUI 针对 此 种 情况 ， 允 许 开 发 者 通过 config 类 的 实例 来 定义 加 载 外 部 脚本 的 元 数据 ， 
将 这 些 元 数据 以 YUI 配置 的 方式 添加 到 YUI 实例 中 ， 这 样 ， 开 发 者 就 可 以 通过 控制 器 层 
来 控制 各 种 具体 的 行为 , 以 现代 的 MVC 架构 来 处 理 Web 文档 ,然后 更 加 灵活 地 在 Javascript 
脚本 中 进行 脚本 内 容 的 嵌 套 和 人 加 ， 和 避免 对 Web 文档 的 大 量 修改 。 

例如 ， 对 上 面 的 Web 文档 进行 修改 ， 将 use0 方 法 的 脚本 作为 控制 器 层 抽 调 出 来 ， 存 
放 到 /Script/controllers/ 目 录 下 的 hello-world.js 文件 中 ， 然 后 通过 config 类 的 对 和 象 实例 来 加 
载 模 型 层 代 码 ， 如 下 所 示 。 
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YUI ( { 
modules : { 
"hello-world' : { 
fullpath : '/Script/modules/hello-world.js' ， 
requires : [ 'node-base' ] 


} 
} 
} ) .use ( 'hello-world' , function (Y)i 
Y.HW.sayHello ( Y.one ( '#test’ ) ) ; 
3 


最 后 ，Web 文档 的 内 容 将 被 修改 ， 仅 需要 加 载 YUI 框架 本 身 以 及 控制 器 层 的 内 容 ， 即 


可 为 视图 层 实现 显示 信息 的 功能 ， 如 下 所 示 。 


<p id="test"></p> 

<script type="text/javascript" src="/Scripts/yui/yui-min.js"></script> 
<script type="text/javascript" src="/Scripts/controller/hello-world.js"> 
</script> 


以 上 的 方法 的 意义 就 是 用 MVC 的 模式 来 对 Javascript 进行 分 层 , 最 终 将 业务 逻辑 、 操 


作 控 制 与 显示 视图 完全 分 离 , 使 脚本 开发 更 加 模块 化 , 也 将 会 极 大 地 降低 程序 维护 的 成 本 。 


7.3.4” 自 定义 模块 组 


在 实际 开发 中 ， 随 着 程序 功能 的 逐渐 增多 以 及 整体 业务 逻辑 的 逐渐 复杂 化 ， 一 些 相 关 


的 模块 往往 需要 被 划分 在 一 个 模块 组 中 ， 同 理 ， 很 多 模块 也 需要 归 类 管理 ， 以 使 系统 内 部 
模块 的 划分 更 加 规范 。 


YUI 框架 支持 开发 者 以 模块 组 的 方式 将 自 定义 模块 归 类 管理 ， 批 量 加 载 ， 其 需要 对 


YUIO 单 全 局 变量 的 配置 信息 进行 个 性 化 定义 ， 然 后 再 进行 处 理 ， 其 使 用 方式 如 下 。 


| 
groups : { 
GroupName :{ 
base : BaseURL ， 
modules : { 
Modulel : { 
path : ModulelURL ， 
requires : ModulelRequires 
时 
Module2 : { 
path : Module2URL ， 


requires : Module2Requires 
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} 
} 
} ).use ( Requires , function (了 ) { 
Sentences ; 


] ) 


在 上 面 的 伪 代 码 中 ,GroupName 关键 字 表示 自 定义 模块 组 的 名 称 ; BaseURL 关键 字 表 
示 模 块 组 的 基本 URL 地 址 ， 如 无 则 可 以 被 忽视 ， Modulel、Module2 等 关键 字 表示 模块 组 
内 每 个 模块 的 名 称 ， ModulelURL、Module2URL 等 关键 字 表示 模块 组 内 每 个 模块 的 具体 
URL; ModulelRequires、Module2Requires 等 关键 字 表示 模块 组 内 每 个 模块 的 依赖 模块 ; 
Requires 关键 字 表 示 use( 方 法 所 依赖 的 具体 某 些 模块 ; Y 表示 开发 者 请 求 的 YUI API， 理 
论 上 开发 者 可 以 将 其 更 改 为 其 他 名 称 ， 但 一 些 特定 的 YUI 模块 可 能 只 允许 使 用 这 一 名 称 ， 
通常 情况 下 建议 不 要 修改 ，Sentences 关键 字 表示 需要 执行 的 语句 。 

例如 ， 以 开发 一 个 用 户 管理 的 功能 为 例 ， 其 需要 定义 一 个 用 户 的 模块 ， 并 实现 以 下 子 
模块 ， 如 图 7-3 所 示 。 


用 户 功 能 模块 


User- 
user-add user-edit user-delete user-detail change- 
password 


图 7-3 用 户 类 的 结构 


根据 用 户 类 的 结构 ， 需 要 为 用 户 类 定义 一 个 父 模块 以 及 五 个 子 模块 ， 用 于 处 理 整 体 用 
户 的 各 种 信息 ， 如 表 7-4 所 示 。 


表 7-4 用 户 类 的 模块 及 功能 


模块 类 型 模块 名 称 作用 

父 模块 user 用 户 类 ， 用 于 初始 化 用 户 的 各 种 信息 
子 模块 user-add 新 增 用 户 

子 模块 user-edit 编辑 用 户 

子 模块 user-delete 删除 用 户 

子 模块 user-detail 显示 用 户 明 细 信 息 

子 模块 user-change-password 修改 用 户 密码 


以 上 这 些 模块 的 划分 ， 需 要 开发 者 分 别 为 每 个 模块 编写 代码 ， 并 将 其 整体 划 入 一 个 模 
块 组 中 进行 管理 。 如 果菜 个 用 户 一 览 页 面 需 要 依次 调用 这 些 功 能 ， 就 需要 同时 以 模块 组 的 
方式 加 载 这 些 模 块 。 
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因此 ， 开 发 者 可 以 将 这 些 模块 分 别 存放 到 不 同 的 脚本 文件 中 ， 放 置 在 一 个 统一 的 目录 
下 ， 例 如 放置 到 /Scripts/modules/user/ 目 录 下 ， 依 次 保存 为 userjs、user-add.js、user-edit.js、 
user-delete.js、user-detail.js 和 user-change-password.js。 

在 使 用 以 上 代码 时 ， 开 发 者 可 以 将 config 类 的 groups、base 等 属性 一 并 加 载 到 YUI 
框架 中 ， 实 现 编组 功能 ， 代 码 如 下 。 


YUI ( { 


groups: { 


SG 2 { 
base : '/Scripts/modules/user/' ， 
modules : { 
"user" s { 
path : "user.js' 
}, 
"user-add” : { 
path : "user-add' ， 
requires : [ 'user' ] 


} 
. 


}.use ( 'user' , function (YY)I{ 


} ) 
7.3.5” 自 定义 包 


包 是 YUI 框架 中 的 重要 实体 ， 是 若干 模块 、 模 块 组 的 整理 和 组 合 。 例 如 之 前 使 用 的 
YUI 包 、Node 包 等 ， 都 襄 括 了 一 大 批 模块 。 包 可 通过 整合 模块 的 功能 ， 帮 助 开 发 者 快速 地 
整体 调用 。 

实际 上 开发 者 也 可 以 针对 若干 官方 模块 或 自 定义 模块 ， 划 分 出 自 定义 的 包 ， 此 时 ， 需 
要 使 用 到 config 类 的 use 属性 。Use 属性 的 属性 值 为 一 个 包含 若干 模块 名 称 的 数组 ， 使 用 
方式 如 下 。 


YUI( { 
modules : { 
StackName : { 
use : [ Modulesl , Modules2 , ] 
} 
} 
} ) .use ( StackName , function (了 Y) { 
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在 上 面 的 伪 代 码 中 , StackName 关键 字 即 自 定义 包 的 名 称 , 其 为 一 个 字符 串 ; Modules1、 
Modules2 等 关键 字 表 示 包 所 襄 括 的 模块 名 称 ， 同 样 为 字符 串 。 通 过 以 上 方式 ， 开 发 者 可 以 
方便 地 组 合 自 定义 包 。 

例如 ， 将 Node Base 和 DOM Base 两 个 模块 合并 为 一 个 包 一 起 加 载 ， 将 其 命名 为 nd， 
代码 如 下 所 示 。 


YUI ({ 
modules : { 
“nd” 4 
use : [ 'node-base' , 'dom-base' ] 


} ).use ( "nd' , function (站 ) { 


自 定义 包 的 优势 在 于 ， 其 可 以 根据 开发 者 自身 的 需要 和 习惯 将 一 些 指定 的 模块 灵活 地 
组 合 在 一 起 ， 快 速 加 载 以 便 调用 ， 可 以 极 大 地 提高 开发 的 效率 。 同 时 ， 对 一 些 功 能 相关 的 
自 定义 模块 来 说 ， 创 建 自 定义 包 也 有 助 于 对 这 些 自 定义 模块 进行 更 有 效 的 管理 。 


7.4” 自 定义 YUI 配置 


YUI 框架 在 默认 状态 下 会 加 载 一 个 官方 定义 的 配置 , 该 配置 将 会 加 载 原版 的 YUI 框架 
并 简单 地 配置 YUI 框架 的 各 种 属性 信息 。 如 果 开 发 者 需要 对 YUI 项 目 进行 自 定义 ， 则 需 
要 建立 一 个 基于 自身 需求 的 YUI 配置 文件 。 

YUI 框架 的 默认 配置 通常 都 会 分 散 存放 在 YUI 自身 源 代码 中 ， 官 方 的 YUI 框架 并 不 
存在 一 个 整体 的 配置 文件 (这 点 有 别 于 很 多 Javascript 插件 或 第 三 方 控件 )。 但 是 这 并 不 影 
响 开 发 者 通过 自 定义 的 config 实例 来 加 载 自 定义 的 配置 ，YUI 框架 允许 用 户 定义 一 个 指定 
名 称 为 YUI config 的 配置 对 象 ， 然 后 框架 自身 会 隐 式 地 加 载 该 配置 对 象 。 

这 种 隐 式 加 载 需要 注意 的 是 ， 如 果 整 个 Web 文档 以 及 其 加 载 的 Javascript 脚本 文件 中 
不 存在 命名 为 YUI config 的 配置 对 象 ， 则 YUI 框架 会 采用 默认 配置 ， 而 如 果 开 发 者 定义 
了 这 一 配置 对 象 ， 则 YUI 框架 会 优先 采用 开发 者 自 定 义 的 配置 对 象 。 

YULI config 配置 对 象 本 身 属 于 YUI 框架 的 config 类 , 是 该 类 下 的 一 个 实例 , 因此 在 定 
义 该 对 象 时 ， 开 发 者 完全 可 以 使 用 该 类 下 的 各 种 属性 ， 通 过 这 些 属 性 来 实现 个 性 化 的 YUI 
配置 。 之 前 小 节 中 介绍 的 加 载 自 定义 模块 、 自 定义 模块 组 以 及 自 定 义 包 等 都 可 以 通过 
YUI config 这 一 全 局 变量 来 实现 。 

实际 上 ， 加 载 自 定义 配置 ， 就 是 将 YUI 单 全 局 变量 括号 内 的 对 象 抽取 出 来 ， 将 其 赋值 
给 YUI config 配置 对 象 。 例 如 ， 之 前 加 载 用 户 模块 组 的 代码 ， 就 可 以 通过 YUI config 配 
置 对 象 应 用 于 全 局 ， 如 下 所 示 。 
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var YUI config = { 
groups: { 
"user” ; { 
base : '/Scripts/modules/user/' ， 
modules : { 
"Bor" 
path : "user.js' 
La 
"user-add' : { 
path : "user-add' ， 
requires : [ 'user' ] 


除了 加 载 自 定义 模块 组 、 自 定义 包 以 外 ， 开 发 者 还 可 以 通过 这 一 方式 来 修改 全 局 的 
YUI 配 置 。 例 如 将 整个 项 目的 语言 改 为 简体 中 文 , 可 以 使 用 config 类 的 lang 属性 , 代码 如 下 。 
var YUI config = { 
lang : "zh-Hans-CN" 
}; 


7.5 辅助 工具 


YUI 框 架 与 原生 Javascript 相 比 其 最 大 的 优势 在 于 追加 了 很 多 原生 Javascript 并 不 包含 
的 功能 ， 并 对 很 多 散乱 的 属性 和 方法 进行 了 整理 ， 将 其 纳入 到 更 加 合理 的 分 类 中 。 本 节 就 
将 对 这 些 常 用 辅助 工具 进行 简单 介绍 。 


7.5.1 数据 类 型 测试 


原生 的 Javascript 支持 五 种 原始 数据 类 型 , 即 字符 串 、 数 字 、 逻辑 值 `. Null 和 Undefined， 
除 此 之 外 ， 还 支持 一 些 扩展 的 数据 类 型 ， 包 括 对 象 、 日 期 、 函 数 、 正 则 表达 式 和 数组 等 。 
在 实际 开发 中 ， 经 常 需要 判断 一 个 数据 的 实际 数据 类 型 ， 然 后 根据 数据 的 类 型 来 决定 如 何 
对 这 些 数据 进行 处 理 。 

在 之 前 的 章节 中 ， 已 经 介绍 过 一 些 简单 的 判断 数据 类 型 的 方法 ， 但 是 原生 的 Javascript 
并 没有 一 个 完整 的 可 以 支持 所 有 数据 类 型 的 判断 方式 。 对 于 原始 数据 类 型 ， 开 发 者 可 以 通 
过 typeof 运算 符 进行 简单 判断 ， 但 是 对 于 引用 数据 类 型 ， 使 用 instance of 运算 符 去 一 个 个 
测试 明显 不 是 什么 好 的 办 法 。 

基于 以 上 需求 ，YUI 框架 提供 了 Lang 包 ， 对 Javascript 原生 的 各 种 数据 判断 工具 进行 
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整理 ， 并 自行 编写 了 一 些 相 关 的 方法 ， 实 现 数 据 类 型 测试 的 功能 。 
1. 判断 数据 类 型 


Lang 包 下 提供 了 一 个 名 为 type0 的 方法 , 用 于 替代 Javascript 原生 的 数据 判断 方法 。 这 
一 方法 支持 以 下 11 种 类 型 的 数据 判断 ， 如 表 7-5 所 示 。 


表 7-5 type0 静 态 方法 支持 判断 的 数据 


数据 类 型 输出 结果 输出 结果 
数组 对 象 array boolean 
日 期 时 间 对 象 date error 
函数 对 象 function null 

数字 值 number object 
正则 表达 式 regexp string 
Undefined undefined 


使 用 type() 方 法 ， 开 发 者 可 以 方便 地 判断 以 上 11 种 类 型 的 数据 。 对 于 不 符合 以 上 类 型 
的 数据 ， 则 该 方法 将 直接 把 数据 识别 为 对 象 ， 输 出 “object”。 

type() 方 法 本 身 属于 lang 类 之 下 的 静态 方法 , 因此 使 用 该 方法 不 需要 将 lang 类 实例 化 ， 
直接 调用 即 可 ， 其 使 用 方式 如 下 所 示 。 

Y.Lang.type ( Data ) ; 

在 上 面 的 伪 代 码 中 ， 通 过 YUI 框架 的 自身 引用 Y 来 调用 Lang 包 ， 然 后 再 通过 Lang 
类 来 调用 type 静态 方法 。 其 中 ，Data 关键 字 表 示 需 要 获取 数据 类 型 的 数据 。 

在 下 面 的 代码 中 ， 就 将 在 YUI 框架 的 沙 箱 中 创建 数据 ， 然 后 再 通过 type() 方 法 来 判断 
这 些 数据 的 具体 类 型 ， 如 下 所 示 。 


YUI ( ) .use ( function (Y) { 
Var arrTestData = [ [] ， 
false ， 
new Date ( ) ， 
new Error ( ) ， 
ai ws 
null ， 
: 
让 二 
/regexp/ ， 
trang 志 
undefined ] ; 
for ( var intLoop = 0 ; intLoop < arrTestData.length ; intLoop ++ ) { 
console.log ( Y.Lang.type (arrTestData [ intLoop ] ) ) > 
} 
] ) = 


执行 以 上 代码 ， 即 可 遍历 arrTestData 自 定 义 数 组 ， 依 次 测试 和 输出 arrTestData 数组 中 
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的 所 有 元 素 的 类 型 。 
2. 判断 数据 类 型 


除了 输出 数据 的 类 型 外 ，YUI 框架 的 Lang 包 还 提供 了 一 系列 静态 方法 ， 用 于 判断 某 
个 数据 是 否 属于 某 一 个 类 型 。 

这 些 方法 中 有 一 些 方法 是 对 Javascript 自 带 方法 的 封装 ， 另 一 些 则 是 YUI 官方 另行 编 
写 的 方法 。YUI 框架 对 这 些 方法 的 整理 ， 极 大 地 简化 了 数据 类 型 判断 的 工作 ， 帮 助 开发 者 
遵循 更 严格 的 数据 判断 标准 ， 如 表 7-6 所 示 。 


表 7-6 判断 数据 类 型 的 方法 

方法 名 作用 

isBoolean0 判断 数据 是 否 为 逻辑 型 数据 
isFunction() 判断 数据 是 否 为 函数 对 象 
isNumber() 判断 数据 是 否 为 数字 
isRegExpO 判断 数据 是 否 为 正则 表达 式 
isUndefined0 判断 数据 是 否 为 Undefined 


方法 名 作用 

isArray() 判断 数据 是 否 为 数组 

isDate0 判断 数据 是 否 为 日 期 时 间 对 象 
isNull0 判断 数据 是 否 为 Null 
isObjectO 判断 数据 是 否 为 对 象 

isString0O 判断 数据 是 否 为 字符 串 


以 上 这 10 种 方法 的 使 用 方式 基本 相同 ， 都 是 将 要 判断 的 数据 作为 参数 添加 到 方法 中 ， 
然后 通过 返回 值 来 获取 判断 结果 。 当 数据 符合 方法 的 判断 ， 这 些 方法 将 返回 逻辑 真 ， 否 则 
返回 逻辑 假 。 

例如 ， 创 建 几 个 对 象 ， 然 后 判断 这 些 对 象 是 否 属于 对 应 的 数据 类 型 和 对 象 ， 代 码 如 下 
所 示 。 


YUI ( ).use ( function (了 Y) { 
var arrTest = [ ] :; 


Var dtTest = new Date ( ) : 

console.log ( Y.Lang.isArray ( arrTest ) ) ; // 输 出 true 

console.log ( Y.Lang.isObject ( arrTest ) ) ; // 输 出 true 

console.log ( Y.Lang.isDate ( dtTest ) ) ; // 输 出 true 

console.log ( Y.Lang.isObject ( dtTest ) ) ; // 输 出 true 
}); 


7.5.2 ”处 理 简单 变量 
在 实际 的 前 端 开发 中 ， 开 发 者 经 常 需要 对 一 些 简单 的 原始 数据 类 型 进行 处 理 ， 获 得 符 
合 需求 的 结果 。YUI 框架 本 身 集成 了 许多 此 类 的 功能 ， 可 以 帮助 开发 者 提高 开发 的 效率 。 
1， 去 除 字符 串 两 侧 空格 


由 于 XHTML 和 HTML 的 文本 区 域 标 记 TEXTAREA 在 提交 表单 时 往往 将 源 代 码 中 的 
空格 识别 为 内 容 一 并 提交 给 服务 器 数据 库 , 一 些 输入 类 HTML 组 件 也 经 常会 把 用 户 误 输入 
的 空格 传递 给 Javascript 脚本 。 因 此 在 实际 开发 中 ， 开 发 者 经 常 需要 清除 Javascript 脚本 获 
取 的 字符 串 两 侧 的 空格 。 
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YUI 框架 的 Lang 包 提 供 了 三 种 静态 方法 ,包括 trim() 方 法 ,trimLeft0 方 法 和 trimRight() 
方法 ， 用 于 对 任意 字符 串 型 变量 进行 处 理 ， 去 除 其 两 侧 的 多 余 空 格 。 具 体 如 下 。 

。 trim() 方 法 

trim0 方 法 的 作用 是 直接 将 字符 串 两 侧 的 空格 去 除 , 返回 清除 了 两 侧 空格 之 后 的 字符 串 
副本 。 其 使 用 方法 如 下 所 示 。 


Y.Lang.trim ( String ) ; 


在 上 面 的 伪 代 码 中 ，String 关键 字 表示 需要 处 理 的 字符 串 。 例 如 ， 创 建 一 个 前 后 各 包 
含 4 个 空格 的 字符 串 “ ”Test ”“”， 即 可 通过 trim() 方 法 将 其 两 侧 空格 去 掉 ， 如 下 所 示 。 
YUI ( ) .use ( function (YY) { 
var strTest = " Test 
console.log ( Y.Lang.trim ( strTest ) ) ; // 输 出 Test 
by 


需要 注意 的 是 , trim() 方 法 仅 能 处 理 字符 串 两 侧 的 字符 ， 如 果 需 要 去 除 字符 串 中 间 的 字 
符 ， 请 使 用 之 后 小 节 介绍 的 sub0 方 法 。 

。 trimLeft() 方 法 

trimLeft() 方 法 是 由 tiim0 方 法 衍生 而 来 的 方法 ， 其 作用 顾名思义 就 是 去 掉 字符 串 左 侧 
的 空格 ， 使 用 方式 与 trim0 方 法 类 似 。 例 如 ， 同 样 处 理 之 前 的 字符 串 “ ”Test  ” 代 
码 如 下 。 


YUI ( ) .use ( function (Y) { 
Var strTest = " Test 
console.log ( Y.Lang.trimLeft ( strTest ) ) ; // 输 出 “Test 
过 要 
。 trimRight() 方 法 
trimRight() 方 法 也 是 由 trim0 方 法 衍生 而 来 的 方法 ， 其 作用 与 trimLeft0 方 法 恰恰 相反 ， 
是 去 除 字符 串 右 侧 的 空白 字符 。 例 如 ， 处 理 之 前 的 字符 串 ， 将 字符 串 右 侧 的 空格 去 除 ， 代 
码 如 下 。 


YUI ( ) .use ( function (YY)i{ 

Var strTest = " Test 

console.log ( Y.Lang.trimRight ( strTest ) ) ; // 输 出 “ Test” 
硬 要 ，; 


2. 简单 匹配 替换 


在 原生 的 Javascript 脚本 语言 中 ， 开 发 者 如 果 希 望 根据 内 容 和 替换 某 个 字符 串 中 的 内 容 ， 
其 往往 需要 创建 一 个 正则 表达 式 对 象 ， 然 后 依赖 正则 表达 式 对 象 的 replace( 方 法 来 实现 替 
换 。 正 则 表达 式 虽 然 是 一 个 强大 的 匹配 工具 ， 但 是 其 本 身 语法 艰深 ， 同 时 其 匹配 替换 的 方 
法 也 十 分 复杂 。 

YUI 框架 为 了 解决 一 些 简 单 的 内 容 匹 配 替 换 , 为 Lang 包 提供 了 一 个 名 为 sub0 的 方法 ， 
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人 允许 开发 者 通过 一 个 简单 的 字符 串 和 一 个 结构 简化 的 配置 对 象 来 实现 这 种 简单 的 替换 ， 其 
使 用 方式 如 下 。 


Y.Lang.sub ( String ，Object ) ; 


在 上 面 的 伪 代 码 中 ，String 关键 字 表示 需要 被 替换 的 字符 串 ，Object 关键 字 表示 存储 
匹配 替换 关系 的 对 象 。sub( 方 法 需要 用 户 建立 一 种 占 位 符 的 机 制 ， 使 用 英文 大 括号 “全 ” 
将 需要 替换 的 内 容 括 起 来 ， 然 后 通过 对 象 来 匹配 蔡 换 。 同 时 ， 用 来 存储 匹配 替换 关系 的 对 
象 也 需要 建立 占 位 符 与 替换 结果 之 间 的 键 值 关系 。 

例如 ， 在 下 面 的 代码 中 ， 就 通过 占 位 符 和 替换 对 象 的 方式 ， 对 一 段 文本 内 容 进行 了 匹 
配 蔡 换 操作 ， 代 码 如 下 。 


YUI ( ) .use ( function (YY) { 
var strTitle = 'YUI {version} 一 高 效 Web 前 端 开 发 之 路 ' ， 
var strNewTitle = Y.Lang.sub( strTitle , { version : '3.15' } ) : 
console.log ( strNewTitle ) ; // 输 出 YUI 3.15 一 高 效 Web 前 端 开发 之 路 
pa 


7.6 小 结 


YUI 框架 相 比 其 他 轻 量 级 的 前 端 框架 ， 其 学 习 曲 线 较 高 ， 很 多 初学 者 在 接触 到 这 一 杠 
架 后 往往 有 无 从 下 手 的 感觉 。 究 其 原因 ， 是 由 于 其 架构 非常 复杂 ， 整 个 框架 由 300 余 个 包 
和 模块 组 成 ， 初 学 者 往往 需要 花费 很 多 时 间 和 精力 才能 理 清 这 些 包 和 模块 之 间 的 关系 。 

但 是 这 种 设计 理念 有 其 独到 之 处 ， 就 是 更 突出 模块 化 的 概念 ,将 Javascript 的 特性 “一 
切 皆 对 象 ”延伸 出 来 ，YUI 框架 的 特点 就 是 “一 切 皆 模块 >。 这 种 全 面 模块 化 的 设计 方式 
的 好 处 就 在 于 其 对 大 型 项 目的 代码 管理 能 力 更 强 ， 更 便于 多 个 开发 者 之 间 的 协作 ， 可 以 有 
效 地 避免 项 目 协作 中 的 命名 空间 污染 问题 。 

本 章 首先 介绍 了 YUI 框架 设计 的 理念 、 其 解决 的 问题 ， 并 剖析 了 YUI 框架 的 整体 结 
构 ， 帮 助 开发 者 更 好 地 理解 YUI 框架 开发 的 思维 方式 。 然 后 ， 以 丰富 的 实例 详细 介绍 了 加 
载 YUI 框架 、 包 和 模块 ， 以 及 自 定义 YUI 模块 的 方法 啊 。 最 后 ， 简 单 介 绍 了 自 定义 YUI 
配置 的 方法 和 一 些 处 理 数据 的 简单 工具 ， 帮 助 开 发 者 更 好 地 使 用 YUI 框架 。 
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Web 开发 的 本 质 实际 上 是 解决 三 方面 的 问题 ， 就 是 操作 DOM 元 素 和 节点 、 处 理事 件 
交互 以 及 前 后 端的 异步 数据 传输 。 其 中 , 原生 的 Javascript 在 操作 DOM 元 素 和 节点 时 往往 
依赖 HTML 的 DOM 技术 ， 通 过 DOM 的 属性 和 方法 来 解决 DOM 元 素 和 节点 的 新 增 、 编 
辑 和 删除 问题 。 

HTML DOM 技术 本 身 由 于 历史 原因 ， 并 没有 为 开发 者 提供 一 个 友好 的 开发 接口 ， 因 
此 各 种 Javascript 开发 框架 最 首要 的 任务 就 是 解决 Javascript 操作 DOM 元 素 和 节点 的 问题 ， 
通过 封装 和 改写 ， 自 行 开发 一 套 操作 DOM 元 素 和 节点 的 体系 。 

YUI 框架 也 并 不 例外 ， 其 本 身 也 对 HTML DOM 的 对 象 、 节 点 、 属 性 和 方法 进行 了 二 
次 封装 ， 定 义 了 Node 类 和 NodeList 类 两 个 类 ， 通 过 这 两 个 类 的 属性 和 方法 来 操作 节点 以 
及 节点 集合 。 本 章 就 将 介绍 YUI 框架 的 Node 包 及 该 包 下 的 各 种 属性 和 方法 ， 帮 助 开发 者 
了 解 YUI 框架 操作 DOM 元 素 的 方法 。 


8.1 篇 选 DOM 元 素 


YUI 框架 的 DOM 筛选 机 制 支持 三 种 筛选 DOM 元 素 的 方式 , 一 种 是 基本 的 筛选 方式 ， 
其 采用 CSS 2.1 标准 的 选择 器 来 筛选 DOM 元 素 ， 另 一 种 是 增强 筛选 方式 ， 其 以 CSS 3.0 
标准 的 选择 器 来 筛选 DOM 元 素 。 除 此 之 外 ， 开 发 者 还 可 以 通过 YUI 框架 的 Node 类 下 的 
一 些 方法 来 筛选 DOM 元 素 。 

这 几 种 方式 筛选 的 结果 包含 两 类 ， 一 种 是 筛选 出 唯一 的 符合 要 求 的 DOM 节点 ， 其 通 
常 将 以 YUI 框 架 下 Node 类 实例 的 方式 存在 , 而 另 一 种 , 则 可 能 筛选 出 若干 符合 要 求 的 DOM 
节点 集合 ， 其 通常 以 YUI 框架 的 NodeList 类 实例 的 方式 存在 。 


8.1.1 基本 筛选 方式 


之 前 的 章节 中 已 经 介绍 过 CSS 2.1 版 本 的 三 种 基本 选择 器 、 两 种 伪 选 择 器 以 及 两 种 选 
择 方 法 ， 其 中 ， 伪 类 选择 器 主要 用 于 标识 Web 元 素 的 选择 状态 ， 并 非 用 于 筛选 Web 元 素 ， 
因此 其 并 不 能 用 于 YUI 框架 的 基本 筛选 。 

真正 能 够 用 于 YUI 框架 的 基本 筛选 方式 实际 上 就 是 CSS 2.1 中 的 选择 器 、 伪 对 象 以 及 
选择 方法 等 ， 其 用 法 如 表 8-1 所 示 。 
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表 8-1 可 用 于 YUI 基 本 筛选 的 选择 方式 


选择 方式 伪 代 码 作用 

标记 选择 器 TagName 筛选 所 有 与 TagName 名 称 一 致 的 标记 

类 选择 器 .ClassName 筛选 所 有 class 属性 值 与 ClassName 一 致 的 标记 

了 有 D 选择 器 #D 筛选 唯一 id 属性 值 与 DD 值 一 致 的 标记 

首 子 元 素 Selector:first-child 筛选 符合 Selector 标记 的 某 个 元 素 的 第 一 个 子 元 素 

前 位 元 素 Selector:before 筛选 符合 Selector 标记 的 某 个 元 素 之 前 相 邻 的 元 素 

后 位 元 素 Selectorafter 筛选 符合 Selector 标记 的 某 个 元 素 之 后 相 邻 的 元 素 

语言 元 素 Selectorlang(Language) ”筛选 符合 Selector 标记 且 具 有 lang 属性 并 且 属 性 值 与 
Language 相符 的 元 素 

分 组 选择 Selectorl,Selector2…… ”筛选 符合 Selectorl 、Selector2 等 基本 选择 的 所 有 标记 集合 

派生 选择 Selectorl Selector2 簿 选 符合 Selectorl 基本 选择 的 标记 内 堪 的 符合 Selector2 基 
本 选择 的 标记 或 标记 集合 

全 局 匹配 本 筛选 指定 XHTML 结构 下 所 有 的 标记 或 标记 集合 


交叉 派生 选择 。 Selectorl > Selector2 筛选 整个 文档 中 所 有 符合 Selectorl 标记 下 包含 的 符合 
Selector2 的 标记 或 标记 集合 

交叉 相 邻 选择 ” Selectorl + Selector2 筛选 整个 文档 中 所 有 符合 Selectorl 标记 之 后 相 邻 的 符合 
Selector2 的 标记 或 标记 集合 


属性 选择 [Attribute] 筛选 整个 文档 中 所 有 包含 Attribute 属性 的 标记 或 标记 集合 
属性 值 选 择 [Attribute=Value] 筛选 整个 文档 中 所 有 包含 Attribute 属性 , 旦 属性 值 为 Value 
的 标记 或 标记 集合 
属性 值 单词 检 ， [Attribute _=Value] 筛选 整个 文档 中 所 有 包含 Attribute 属性 ， 且 属性 值 包含 连 
索 接 符 “-”+Value+ 连 接 符 “-” 的 标记 或 标记 集合 
属性 值 单词 起 [Attribute|=Value] 筛选 整个 文档 中 所 有 包含 Attribute 属性 , 且 属 性 值 以 Value 
始 筛选 起 始 ， 之 后 跟随 连接 符 “-” 和 其 他 字符 的 标记 或 标记 集合 


开发 者 可 以 适时 地 根据 实际 的 需求 ， 灵 活 地 决定 使 用 以 上 选择 方式 ， 将 其 应 用 到 YUI 
框架 的 内 置 方 法 中 ， 获 取 基于 Node 实例 的 节点 ， 或 获取 一 个 基于 NodeList 实例 的 节点 
集合 。 

1. 获取 单个 Node 实例 


YUI 框架 提供 one0) 方 法 ， 获 取 一 个 单独 的 Node 实例 ， 指 向 一 个 节点 对 象 。one() 方 法 
是 YUI 框架 的 全 局 方法 ， 其 作用 就 是 根据 开发 者 使 用 的 CSS 选择 器 字符 串 或 HTML 
Element 类 型 节点 对 象 ， 返 回 一 个 YUI 框架 的 Node 对 象 实例 ， 其 使 用 方法 如 下 所 示 。 


YUI( ) .one ( CSS2Selector | HTML Element ) ; 


在 上 面 的 伪 代 码 中 ，CSS2Selector 关键 字 表示 CSS2 的 选择 器 字符 串 ; HTML Element 
关键 字 表 示 一 个 HTML DOM 的 Element 节点 对 象 。 开 发 者 可 以 从 这 两 种 之 间 选 择 任意 一 
种 ， 将 其 作为 参数 添加 到 one0 方 法 中 。 

相 比 原生 的 HIML DOM 内 置 的 方法 , one() 方 法 具有 较 大 的 优势 。 原生 的 HIML DOM 
仅 提供 了 getElementById() 方 法 来 实现 one0 方 法 的 类 似 功能 , 仅 能 针对 Web 元 素 的 id 属性 
进行 筛选 ， 而 one0 方 法 则 可 以 使 用 标记 选择 器 、 类 选择 器 、ID 选择 器 以 及 分 组 选择 和 派 
生 选 择 ， 适 应 性 更 好 。 另 外 one0 方 法 也 较 简洁 ， 节 省 了 代码 行 数 和 书写 效率 。 

在 此 需要 注意 的 是 ，one( 方 法 在 进行 筛选 后 ， 仅 能 返回 一 个 筛选 的 结果 ， 其 又 分 为 三 
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种 情况 : 第 一 种 情况 , 筛选 失败 , 参数 无 效 或 无 法 找到 符合 筛选 需求 的 节点 对 象 , 此 时 oneO 
方法 将 返回 一 个 null 值 ; 第 二 种 情况 ， 短 选 成 功 得 到 一 个 符合 筛选 需求 的 节点 对 象 ， 此 时 
one() 方 法 将 直接 将 该 节点 对 象 转换 为 YUI 框架 的 Node 对 象 实例 ， 并 返回 转换 后 的 对 象 ; 
第 三 种 情况 ， 如 果 在 Web 文档 中 具有 多 个 符合 筛选 条 件 的 对 象 〈 例 如 开发 者 采用 了 标记 选 
择 器 、 类 选择 器 等 方式 来 进行 筛选 )， 则 one() 方 法 将 把 符合 筛选 要 求 的 第 一 个 DOM 节点 
对 象 转换 为 YUI 框架 的 Node 对 象 实例 ， 并 返回 转换 后 的 对 象 。 

one0 方 法 的 使 用 依赖 于 YUI 框架 的 Node Core 模块 ， 因 此 在 使 用 这 一 方法 时 ， 必 须 确 
保 已 经 加 载 了 该 模块 。 

例如 ， 在 Web 文档 中 存在 一 个 id 属性 为 “signin”，class 属性 值 为 “submitrbm ”的 按 
钮 ， 代 码 如 下 。 


<button type="button" id="signin" class="submit-btn"> 登 录 </button> 


如 果 开 发 者 需要 获取 这 一 按钮 ， 以 提交 整个 表单 ， 则 可 以 通过 YUI 框架 首先 加 载 
node-core 模块 或 node 包 ， 然 后 再 使 用 one0 方 法 ， 通 过 css 选择 该 节点 对 象 ， 代 码 如 下 。 
YUI ( ) .use ( 'node-core' , function (了 ) { 


var objSignInBtn = Y.one ( '#signin' ) ; 


]) 7 


Node 包 本 身 包 含 了 Node Core、NodeList、Node Style 以 及 Node Screen 等 多 个 模块 。 
在 实际 开发 中 ， 开 发 者 应 该 根据 实际 的 需求 决定 是 加 载 整个 Node 包 还 是 仅 加 载 某 一 两 个 
模块 即 可 满足 使 用 的 需求 ， 总 而 言 之 ， 加 载 的 模块 越 少 ， 则 效率 越 高 ， 速 度 也 越 快 。 

在 以 上 的 代码 中 ， 就 仅 加 载 了 核心 的 node-core 模块 以 提高 效率 。 另 外 ， 由 于 以 上 代 
码 中 使 用 了 ID 选择 器 ， 因 此 one( 方 法 只 会 返回 符合 该 id 属性 的 标记 。 

如 果 Web 文档 存在 两 个 class 属性 值 为 “submitbtm ”的 按钮 ， 其 中 一 个 为 注册 ， 另 一 
个 为 登录 ， 代 码 如 下 。 

<button type="button" id="signin" class="submit-btn"> 登 录 </button> 

<button type="button" id="signup" class="submit-btn"> 注 册 </button> 


在 上 面 的 代码 中 ， 两 个 按钮 的 class 属性 值 相同 ， 此 时 ， 开 发 者 仍然 可 以 通过 one0) 方 
法 以 class 属性 值 为 参数 进行 筛选 ， 代 码 如 下 。 
YUI ( ) .use ( 'node-core' , function (了 了) { 


Var objSignInBtn = Y.one (“'.submit-btn' ) ; 
Ws 


由 于 符合 class 属性 值 为 “submit-bm” 的 DOM 节点 有 两 个 ， 因 此 one 方法 将 只 返回 
其 中 第 一 个 元 素 。 

同 理 ，Web 文档 中 如 果 只 有 这 两 个 按钮 标记 BUTTON， 则 开发 者 也 可 以 通过 标记 选择 
器 来 筛选 ， 其 返回 的 结果 将 和 用 类 选择 器 返回 的 结果 相同 ， 都 只 返回 第 一 个 符合 筛选 要 求 
的 结果 ， 代 码 如 下 。 


YUI ( ) .use ( 'node-core' , function (了 ) { 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 
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